vue实现动态列表点击各行换色的方法
2018-09-13 15:07
761 查看
只是模拟一练习 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实现动态列表点击各行换色的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue 点击按钮实现动态挂载子组件的方法
- Vue.js Ajax动态参数与列表显示实现方法
- Vue 实现列表动态添加和删除的两种方法小结
- vue.js 实现点击按钮动态添加li的方法
- Vue.js自定义下拉列表,如何实现在下拉列表区域外点击即可关闭下拉列表的功能
- 【MUI】动态索引列表实现【搜索有效的方法】
- JavaScript实现动态删除列表框值的方法
- javascript实现点击商品列表checkbox实时统计金额的方法
- 通过按键点击实现动态切分窗口的方法
- vue实现列表的添加点击
- vue2.0 实现click点击当前li,动态切换class
- 实现RecycleView动态使列表item可以点击或不可点击切换
- Vue在列表中绑定点击事件后的处理方法
- Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
- Vue.js实现网格列表布局转换方法
- 实现RecycleView动态使列表item可以点击或不可点击切换
- javascript实现dom动态创建省市纵向列表菜单的方法
- jQuery+css3实现Ajax点击后动态删除功能的方法
- Vue.js实现表格动态增加删除的方法(附源码下载)