Vue实现仿淘宝商品详情属性选择的功能
2018年09月07日 17:13:35 yx_cos 阅读数：278
先看下效果图：（同个属性内部单选，属性与属性之间可以多选）
主要实现过程：
所使用到的数据类型是（一个大数组里面嵌套了另一个数组）具体格式如下：
-
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
原文地址：https://www.cnblogs.com/xiaocaiyuxiaoniao/p/9789966.html