浙江千岛湖,环球华网,剑侠情侣
只是模拟一练习 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){ //点击切换 变量的值 赋值为 index console.log(index); this.isactive=index; } } }) </script>
以上这篇vue实现动态列表点击各行换色的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论