国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

vue實現動態列表點擊各行換色的方法

2019-11-19 12:56:49
字體:
來源:轉載
供稿:網友

只是模擬一練習 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實現動態列表點擊各行換色的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 开江县| 托克托县| 邢台县| 古浪县| 邵东县| 陆川县| 八宿县| 峨边| 扶风县| 紫云| 修水县| 玉田县| 泌阳县| 汾西县| 夏邑县| 宝丰县| 隆安县| 石嘴山市| 定陶县| 松江区| 甘德县| 邵武市| 都兰县| 宜昌市| 枞阳县| 鄂温| 得荣县| 辽阳市| 罗定市| 扎兰屯市| 皋兰县| 赣州市| 湘潭市| 改则县| 通道| 巴中市| 兴城市| 齐齐哈尔市| 临潭县| 绍兴县| 丽江市|