vue实现动态列表点击各行换色的方法

只是模拟一练习 v-for v-on v-bind的一个简单demo

创新互联专注于企业营销型网站建设、网站重做改版、潮南网站定制设计、自适应品牌网站建设、H5响应式网站、商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为潮南等各大城市提供网站开发制作服务。

vue实现动态列表点击各行换色的方法

代码思路：

遍历出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实现动态列表点击各行换色的方法
本文来源：https://www.cdcxhl.com/article48/peiihp.html

成都网站建设公司_创新互联，为您提供关键词优化、企业网站制作、面包屑导航、定制开发、网站制作、网站导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容