Vue实现仿淘宝商品详情属性选择的功能
先看下效果图:(同个属性内部单选,属性与属性之间可以多选)
主要实现过程:
所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:
-
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