先看下效果图 同个属性内部单选 属性与属性之间可以多选

主要实现过程

所使用到的数据类型是 一个大数组里面嵌套了另一个数组 具体格式如下

 attrAndValuees: [ { attrId : 1, attrName : 味道 , valuees : [ { attrId : 1, value : 橘子味 }, { attrId : 2, value : 草莓味 } ] }, { attrId : 2, attrName : 容量 , valuees : [ { attrId : 4, value : 100ml }, { attrId : 6, value : 300ml } ] }]

相关的Html 代码

 div class sortItem v-for (item,index) in attrAndValuees :key item.attrId span {{item.attrName}}: /span ul li v-for (itemm,ind) in item.valuees :key itemm.attrId :class { cur :sel[index] ind} click select(index,ind) class hand {{itemm.value}} /li /ul /div 

实现的原理 新建一个数组 数组的每一项代表一个属性值 由这个数组中的值来改变对应属性的样式

在data里新增一个数组

 data () { return { sel: []}

在methods中新增一个select方法 在点击属性值的时候调用

select: function (index, ind) { this.sel[index] ind; this.$set(this.sel, index, ind) // this.sel this.sel.concat([]); }

就以上几个小步骤就可以实现这个效果了 是不是so easy~

不过这中间需要注意的有几点

Vue之所以能够监听Model状态的变化 是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是 对于数组元素的赋值 却没有办法直接监听 因此 在这个项目中我们用了set的方法来给数组赋值或者用concat连接一个空数组来对数组进行重新赋值。

若你想了解更多关于数组赋值的知识 可访问官网 https://cn.vuejs.org/v2/guide/list.html