html:
<div id="app">
<div>
<button v-for="(ind,key,index) in btn" v-bind:class="{active:(indexs==index)}" v-on:click="a(index)">{{ind}}--{{index}}</button>
</div>
<div class="wrap">
<div v-for="(w,key,index) in box" v-if="indexs == index">{{w}}</div>
</div>
</div>
css:
.wrap div{
width: 300px;
height: 300px;
background-color: #0cc;
}
.active{
background-color: red;
}
js:方法一：
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
btn:{a:"按钮1",b:"按钮2",c:"按钮3"},
box:{aa:"tab切换1",bb:"tab切换2",cc:"tab切换3"},
indexs:0,
a:function(str){ //str就是index
this.indexs=str;
console.log(this.indexs)
console.log(str)
}
}
})
</script>
js:方法二：知识略改写法
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
btn:{a:"按钮1",b:"按钮2",c:"按钮3"},
box:{aa:"tab切换1",bb:"tab切换2",cc:"tab切换3"},
indexs:0,
},
methods:{
function a(str){
this.indexs=str;
}
}
})
</script>
