vue实现动态列表点击各行换色的方法
更新时间：2018年09月13日 15:07:19 作者：胖梅
今天小编就为大家分享一篇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 Element UI使用中遇到的问题，对ElementUI感兴趣的同学，可以参考下2021-05-05
vue+elementUI实现动态合并数据相同的单元格(可指定合并列)
这篇文章主要介绍了vue+elementUI如何实现动态合并数据相同的单元格,文中有详细的代码实例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue项目设置打包后的静态文件访问路径,vue项目的最终项目文件需要经过打包输出,静态文件的访问路径需要在vue.config.js文件中设置,本文给大家介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了详解swiper在vue中的应用(以3.0为例），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
VUE中computed 、created 、mounted的先后顺序说明
这篇文章主要介绍了VUE中computed 、created 、mounted的先后顺序说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue{{}}拼接字符串和换行符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法详解
这篇文章主要介绍了vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法,结合实例形式详细描述了中文乱码问题的原因、解决方法与相关注意事项,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue中对监听esc事件和退出全屏问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue踩坑之backgroundImage路径问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,下面这篇文章主要给大家介绍了关于vue Keep-alive组件缓存的简单使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
最新评论