作者：徐曼曼_ | 来源：互联网 | 2023-09-08 16:19
Vue 实现 Tab切换实现的场景很多&＃xff0c;比如&＃xff0c;利用vue-router、利用第三方插件、利用组件等等.
我用的是组件&＃xff0c;为什么不用路由&＃xff0c;有3个原因&＃xff1a;
综上所述&＃xff0c;上面已经介绍完我为什么要使用组件了
index.html文件
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>componenttitle><style type&＃61;"text/css">*{padding:0;margin:0}#app{width:500px;height:300px;margin:0 auto;background-color:#ddd}.top{height:50px;line-height:50px;width:100%;background-color:#999}.top ul li{display:inline-block;margin:0 10px}.top ul li a{text-decoration:none;color:white}style>head><body><div id&＃61;"app"><div class&＃61;"top"><ul><li &＃64;click&＃61;&＃39;tabToggle("tab01");&＃39;>Tab001li><li &＃64;click&＃61;&＃39;tabToggle("tab02");&＃39;>Tab002li>ul>div><div><component :is&＃61;&＃39;currentView&＃39; keep-alive>component>div>div>body><script type&＃61;"text/Javascript" src&＃61;&＃39;vue.min.js&＃39;>script><script>var tab01 &＃61; Vue.extend({template: &＃39;This is tab01
&＃39;})var tab02 &＃61; Vue.extend({template: &＃39;This is tab02
&＃39;})var app &＃61; new Vue({el: &＃39;#app&＃39;,data: {currentView: &＃39;tab01&＃39;},components: {tab01: tab01,tab02: tab02},methods: {tabToggle: function(tabText) {this.currentView &＃61; tabText}}})script>html>
ok,完事儿了&＃xff01;
接下来&＃xff0c;说说我遇到的问题&＃xff0c;如果上面能满足你的问题&＃xff0c;则不需要看下面
当然&＃xff0c;我不可能只是简简单单的一个页面&＃xff0c;一个小demo&＃xff0c;如果要应用到项目中&＃xff0c;又是另一回事儿。
问题1&＃xff1a;
例如&＃xff1a;在 .vue文件中
反反复复&＃xff0c;这是什么造成的&＃xff0c;对于新手来说&＃xff0c;一个不经意间&＃xff0c;就造成了&＃xff0c;
原因在于data&＃xff0c;vue规定&＃xff0c;data是一个函数&＃xff0c;我这里写成了对象&＃xff1a;
&＃61;&＃61;应修改为&＃xff1a;&＃61;&＃61;
问题2&＃xff1a;
查半天资料没查出个所以然来&＃xff0c;那个纠结啊&＃xff0c;群里各种找大神啊
太闹心&＃xff0c;以为是 自己写的组件的问题&＃xff0c;各种改&＃xff0c;改半天&＃xff0c;没任何效果&＃xff0c;后来抱着试试的心态&＃xff0c;在页面上加了个变量&＃xff0c;发现&＃xff0c;压根就不起效果&＃xff0c;
this.变量名 &＃61; "Hello"
页面没有任何反应&＃xff0c;以为是vue版本太高了&＃xff0c;不支持&＃xff0c;算了&＃xff0c;不闲扯了&＃xff0c;谁做谁知道&＃xff01;
问题的原因在于&＃xff1a;加了一个不存在的方法
得&＃xff0c;把它删除掉就可以了&＃xff0c;其他就不介绍了&＃xff0c;完成了。OK了&＃xff01;
京公网安备 11010802041100号