Vue实现仿淘宝商品详情属性选择的功能

Vue实现仿淘宝商品详情属性选择的功能

2018年09月07日 17:13:35 yx_cos 阅读数：278

 

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

主要实现过程：

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

1.  
   attrAndValuees: [
2.  
   {
3.  
   'attrId': 1,
4.  
   'attrName': '味道',
5.  
   'valuees': [
6.  
   {
7.  
   'attrId': 1,
8.  
   'value': '橘子味'
9.  
   },
10.  
    {
11.  
    'attrId': 2,
12.  
    'value': '草莓味'
13.  
    }
14.  
    ]
15.  
    },
16.  
    {
17.  
    'attrId': 2,
18.  
    'attrName': '容量',
19.  
    'valuees': [
20.  
    {
21.  
    'attrId': 4,
22.  
    'value': '100ml'
23.  
    },
24.  
    {
25.  
    'attrId': 6,
26.  
    'value': '300ml'
27.  
    }
28.  
    ]
29.  
    }]

相关的Html 代码：

1.  
   <div class="sortItem" v-for="(item,index) in attrAndValuees" :key="item.attrId">
2.  
   <span>{{item.attrName}}:</span>
3.  
   <ul>
4.  
   <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>
5.  
   </ul>
6.  
   </div>

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

在data里新增一个数组 ：

1.  
   data () {
2.  
   return {
3.  
   sel: []
4.  
   }

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

1.  
   select: function (index, ind) {
2.  
   this.sel[index] = ind;
3.  
   this.$set(this.sel, index, ind)
4.  
   // this.sel = this.sel.concat([]);
5.  
    
6.  
   }

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

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

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

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