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