国产探花免费观看_亚洲丰满少妇自慰呻吟_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實現動態列表點擊各行換色的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 磴口县| 崇义县| 舒兰市| 库伦旗| 乌拉特中旗| 丰县| 思南县| 贵阳市| 永寿县| 舞阳县| 桐庐县| 谷城县| 云林县| 阳谷县| 商丘市| 华坪县| 宜章县| 洛扎县| 延长县| 隆子县| 青浦区| 磴口县| 商南县| 隆化县| 盘锦市| 施甸县| 武义县| 类乌齐县| 衡水市| 仁寿县| 鄂尔多斯市| 手游| 南乐县| 西充县| 汉寿县| 长治县| 白朗县| 盐城市| 修文县| 正安县| 阜康市|