700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue绑定class实现当前列表项的样式切换

vue绑定class实现当前列表项的样式切换

时间:2023-03-14 19:06:55

相关推荐

vue绑定class实现当前列表项的样式切换

<div v-bind:class="{ active: isActive }"></div>当isActive为真时,该div会有active类的样式,否则,没有。

v-for循环生成列表,当点击列表时,将被点击的那个列表的索引值存储在num中,即num值即为当前列表的索引值。

再依照class绑定的样式的条件num==index,就会只有索引值为num的列表才具有当前样式。

由此,实现了列表的当前样式切换

<div id="app"><ul><li v-for="(item,index) of arr":key="index"@click=changeCurrent(index):class="{current:num==index}">{{item}}</li></ul></div><script>new Vue({el:"#app",data:{arr:["语文","数学","英语","物理"],num:0},methods:{changeCurrent(index){this.num=index}}});</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。