vue实现动态列表点击各行换色的方法
2019/6/27 7:42:27
本文主要是介绍vue实现动态列表点击各行换色的方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
只是模拟一练习 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实现动态列表点击各行换色的方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-25Vue3学习:从入门到初步掌握
- 2024-12-25Vue3入门:新手必读的简单教程
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程