<!DOCTYPE html>
<html>
<head>
<title>tab</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src='js/vue.js'></script>
<script type="text/javascript" src='js/index.js'></script>
</head>
<!--
思想：
其实tab切换分两大块，上面的哪一行是一个ul，里面有四个li，下面的内容是四个div只不过只显示一个，其内容对应上面的li
现在要做的就是点击li时显示对应的div。所以当我们点击li时可以获取其index值，然后显示对应index的div。 -->
<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>
</html>
window.onload=function(){
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;
}
}
});
}