Vue實現仿淘寶商品詳情屬性選擇的功能

先看下效果圖：（同個屬性內部單選，屬性與屬性之間可以多選）

主要實現過程：

所使用到的數據類型是（一個大數組里面嵌套了另一個數組）具體格式如下：

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