您好,登錄后才能下訂單哦!
只是模擬一練習(xí) v-for v-on v-bind的一個簡單demo
代碼思路:
遍歷出data里面的數(shù)據(jù) v-for
給li加點擊事件
綁定class樣式 怎么控制樣式的顯示
通過 class的控制 v:bind:class={class:index==變量} 下標(biāo)和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:['健康醫(yī)療','生活服務(wù)','信息安全','文化娛樂'], }, methods:{ fn:function(index){ //點擊切換 變量的值 賦值為 index console.log(index); this.isactive=index; } } }) </script>
以上這篇vue實現(xiàn)動態(tài)列表點擊各行換色的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。