vue實現淘寶商品詳情頁屬性選擇功能

方法一是自己想出來的，方法二來自忘記哪里看到的了

不知道是不是你要的效果：

 

方法一：利用input[type="radio"]

css代碼：

 

    input {
        display: none;
    }
    
    input[type="radio"]+label {
        /* 默認label的樣式 */
        /* content: "\a0"; */
        display: inline-block;
        padding: 10px 20px;
        background-color: #666;
        margin-left: 20px;
        color: #fff;
        border-radius: 10px;
    }
    
    input[type="radio"]:checked+label {
        /* 當點擊label的時候背景顏色發生改變 */
        background-color: aqua;
    }
    
    .row {
        display: inline-block;
    }

 

html：

        <div v-for="(option, index) in options">
            <p>{{option.name}}</p>
            <div class="row" v-for="(item, ind) in option.items" @click="select(index, ind)">
                <input type="radio" :name="index" :id="item.id" value="">
                <!-- 關鍵在於name這里設為index，讓每一行選項的name一樣，屬性id和label的for屬性一致 -->
                <label :for="item.id">{{item.msg}}</label>
            </div>
        </div>    

vue實例：

        data() {
                return {
                    id: ['', '', ''],
                    options: [{
                        items: [{
                            'msg': '綠色',
                            "id": "11"
                        }, {
                            'msg': "紅色",
                            "id": "12"
                        }],
                        name: "顏色"
                    }, {
                        items: [{
                            'msg': "XXX",
                            "id": "13"
                        }, {
                            'msg': "L",
                            "id": "14"
                        }, {
                            'msg': "XXL",
                            "id": "15"
                        }],
                        name: "型號"
                    }, {
                        items: [{
                            'msg': "32G",
                            "id": "16"
                        }, {
                            'msg': "8G",
                            "id": "17"
                        }, {
                            'msg': "4G",
                            "id": "18"
                        }],
                        name: "版本"
                    }]
                }
            },
            methods: {
                select(index, ind) {
                    var itemId = this.options[index].items[ind].id; //獲取選中的id號
                    this.id.splice(index, 1, itemId); //替換數組id[]中對應的元素，獲得所有選中的id
                    console.log(this.id);
                }
            }    

方法二：利用數組（把每一行當做數組第幾個位置eg：a[1]相當於這個數組里的1，每行內選擇的元素的索引為數組對應位置的元素值eg：a[1] = xx相當於這里的xx）

css代碼：

    span {
        display: inline-block;
        padding: 10px 20px;
        background-color: #666;
        margin-left: 20px;
        color: #fff;
        border-radius: 10px;
    }

    .select {
        background-color: aqua;
    }
    
    .row {
        display: inline-block;
    }

html代碼：

        <div v-for="(option, index) in options">
            <p>{{option.name}}</p>
            <span :class="{select:sel[index] == ind}" v-for="(item, ind) in option.items" @click="select(index, ind)">{{item.msg}}</span>
        </div>    

vue實例：（data中的數據和上面的options一樣省略啦）

            data() {
                  return {
                      sel: [],
                      id: [],
　　　　　　　　　　　　　　　options: [],
                  }
              },
              methods: {
                  select: function(index, ind) {
                         this.sel[index] = ind; //讓數組sel的第index+1的元素的值等於ind
                         this.sel = this.sel.concat([]); //因為數組是引用類型，對其中一個變量直接賦值不會影響到另一個變量（並未操作引用的對象），使用concat（操作了應用對象）
                         this.id[index] = this.options[index].items[ind].id; //獲取選中的id
                         this.id = this.id.concat([]);
                         console.log(this.id);
                  } 
             }           

注意：方法二中的vue實例方法中說到引用類型，推薦看：https://www.cnblogs.com/gromimiss/p/6066268.html