话不多说,看下面的代码吧
HTML
<div id="app">
<ul class="nav">
<li v-for="(item,index) of list"
:class="{active: ind == index}"
@click="clickTab(index)">{{item}}
</li>
</ul>
<p>{{list[ind]}}</p>
</div>
注:别忘记先引入vue
js
<script>
new Vue({
el:'#app',
data:{
list:['HTML','CSS','javaScript','vue'],
ind:0
},
methods:{
clickTab(index){
this.ind = index;
}
}
})
</script>
.active{
background: deepskyblue;
color: #fff;
}
效果如下:
觉得有用的伙伴别忘了点个赞哦,满足一个我的虚荣心吧 {~ _ ~}