本篇文章给大家带来的内容是关于基于vue双向绑定实现的动态列表+动态样式（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
先上效果图
注：下面的几个值可以从其他地方获取，这边演示我是写死的
在上逻辑图
接着上代码
template部分
<template>
<div >
<div>
<span>选择的选项：</span>
<span v-for="item in selectlistlabel" style="margin-left: 10px;">{{item}}</span>
</div>
//choose事件绑定写在最外层应用的js的事件委托，如果有不知道的可以参考我的一篇关于事件委托的文章
<div @click="choose" v-for="item in list">
<div v-bind:class="[selectlistvalue.indexOf(item.value)>-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}}
</div>
</div>
</div>
</template>script部分
<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)
}
},
}
}
</script>style部分
<style scoped>
.active{
background-color: #0ccfbf;
color: white;
}
</style>注：详细说明标注代码上了，
需要注意的坑：
1.activeclass需要在computed里面把他return出来，否则加载不到样式。 2.对数组的操作方法，简单点使用vue支持的变异方法（否则vue无法检测到数组变化，也就无法动态绑定） 官网截了一小段图
相关推荐：
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
以上是基于vue双向绑定实现的动态列表+动态样式（代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
