目录
1.指令的名字(定义的时候不加v-,使用vue指令的时候加上v-)
一、tab切换,标签页的方法
1、第一步:引入Vue.js
<script src="./vue-2.4.0.js"></script>
2、第二步:创建数据
<script>
const vm = new Vue({
el: '#app',
data: {
cur:0,
list:[
{id:1,title:'标题1',content:"内容1"},
{id:2,title:'标题2',content:"内容2"},
{id:3,title:'标题3',content:"内容3"},
]
},
methods: {
},
})
</script>
3、第三步:遍历数组
<div id='app'>
<ul>
<li v-for="(item,index) in list"> {
{item.title}}</li>
</ul>
<ul>
<li v-for="(item,index) in list">{
{item.content}}</li>
</ul>
</div>
4、第四步:给标题绑定单击事件
<li v-for="(item,index) in list" @click="changeIndex(index)" > {
{item.title}}</li>
5、第五步:执行单击事件
changeIndex(index){