只是模擬一練習 v-for v-on v-bind的一個簡單demo
代碼思路:
遍歷出data里面的數據 v-for
給li加點擊事件
綁定class樣式 怎么控制樣式的顯示
通過 class的控制 v:bind:class={class:index==變量} 下標和class變量是否相等控制true false
代碼:
<div id="app"> <ul><li v-for='(item,index) in arr' v-bind:class='{bg:index==isactive}'@click='fn(index)'>{{item}}</li></ul> </div><script>var vm=new Vue({el:'#app',//el element 獲取容器 vue作用的范圍data:{isactive:0,arr:['健康醫療','生活服務','信息安全','文化娛樂'], },methods:{fn:function(index){//點擊切換 變量的值 賦值為 indexconsole.log(index);this.isactive=index;}}})</script>
以上這篇vue實現動態列表點擊各行換色的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答