vue的tab切換
思想：
其實tab切換分兩大塊，上面的哪一行是一個ul，裏面有四個li，下面的內容是四個div只不過只顯示一個，其內容對應上面的li
現在要做的就是點擊li時顯示對應的div。所以當我們點擊li時可以獲取其index值，然後顯示對應index的div。
<!DOCTYPE html>
<html>
<head>
<title>tab</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="my">
<div class="myTab">
<ul class="tab-tit">
<!-- 遍歷lists獲取title的值以及index，點擊時獲取該index並將其傳給num。 -->
<li v-for="(v,i) in lists" @click="change(i)" :class="{'active':num==i}">
{{v.title}}
</li>
</ul>
<div>
<!-- 遍歷lists獲取content的值以及index，顯示index==num的div，這個num對應的是title的index -->
<div v-for="(v,i) in lists" v-show="num==i">
{{v.content}}
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el:'#my',//掛載元素
data:{
num:0,
lists:[
{title:'AAA',content:'aaa'},
{title:'BBB',content:'bbb'},
{title:'CCC',content:'ccc'},
{title:'DDD',content:'ddd'}
]
},
methods:{//change方法，點擊時將點擊的title的index傳給num，通過num來控制顯示的cntent內容
change:function(i){
this.num=i;
}
}
});
</script>
</html>
先使用v-for把數據遍歷渲染到頁面上，
v-for中有一個i表示索引，將i作爲參數傳入到change（i）這個函數中，
在data中定義一個num變量，在title中如果i= =num,這個title就會添加一個acive的class。
當然，這個num是需要在change（）這個函數中不斷改變的，需要將傳入的索引值賦值給num，
這樣,我們就可以用v-show做下判斷。v-show=”i==num”,
如果等於的話，當前的內容就會顯示。否則隱藏