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”,
如果等于的话,当前的内容就会显示。否则隐藏