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

主要實現過程：

所使用到的資料型別是（一個大數組裡面嵌套了另一個數組）具體格式如下：

   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連線一個空陣列來對陣列進行重新賦值。