本篇文章给大家带来的内容是关于基于vue双向绑定实现的动态列表+动态样式（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
先上效果图
注：下面的几个值可以从其他地方获取，这边演示我是写死的
在上逻辑图
立即学习“前端免费学习笔记（深入）”；
接着上代码
template部分
选择的选项： {{item}}//choose事件绑定写在最外层应用的js的事件委托，如果有不知道的可以参考我的一篇关于事件委托的文章-1?activeclass:'']" :label="item.label" :value="item.value" style="margin: 5px auto;width: 100px;height: 38px;border:1px solid #e9eaec;line-height: 38px;border-radius: 5px;"> {{item.label}}
登录后复制
script部分
export default { name: 'HelloWorld', data() { return { selectlistlabel:[], //用来展示是选项 selectlistvalue:[], //展示选项的值 list: [ //实际当中这部分数据为后台获取，现在为了方便写几个演示用 {value: 'New York',label: 'New York'}, {value: 'London',label: 'London'}, {value: 'Sydney',label: 'Sydney'}, {value: 'Ottawa',label: 'Ottawa'}, {value: 'Paris',label: 'Paris'}, {value: 'Canberra',label: 'Canberra'} ], } }, computed:{ activeclass: function() { return 'active' }, }, methods:{ choose:function(e){ let dom = e.target; //获取绑定在dom上的数据 var domvalue = dom.getAttribute("value"); var domlabel = dom.getAttribute("label"); //如果点到空白地方 if(dom.getAttribute("label") == null){ return; } //如果点击的对象的值已经在数组里面了，则把他从数组中删除 //否则就把他添加到数组里面去 if(dom.getAttribute("class") == "active"){ for(let i = 0;i<this.selectlistvalue.length;i++){ if(this.selectlistvalue[i] == domvalue){ this.selectlistvalue.splice(i,1) } } for(let i = 0;i<this.selectlistlabel.length;i++){ if(this.selectlistlabel[i] == domlabel){ this.selectlistlabel.splice(i,1) } } }else{ this.selectlistvalue.push(domvalue) this.selectlistlabel.push(domlabel) } }, } }
登录后复制
style部分
.active{ background-color: #0ccfbf; color: white; }
登录后复制
注：详细说明标注代码上了，
需要注意的坑：
1.activeclass需要在computed里面把他return出来，否则加载不到样式。2.对数组的操作方法，简单点使用vue支持的变异方法（否则vue无法检测到数组变化，也就无法动态绑定）官网截了一小段图
登录后复制
相关推荐：
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
详解Vue数据双向绑定
以上就是基于vue双向绑定实现的动态列表+动态样式（代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2741397.html
