Vue implements the attribute selection function of Taobao product details page

Method 1 is what I came up with, method 2 comes from forgetting where I saw it

I don't know if it's what you want:

 

Method 1: Use input[type="radio"]

css code:

 

 1     input {
 2         display: none;
 3     }
 4     
 5     input[type="radio"]+label {
 6         /* 默认label的样式 */
 7         /* content: "\a0"; */
 8         display: inline-block;
 9         padding: 10px 20px;
10         background-color: #666;
11         margin-left: 20px;
12         color:#fff ;
 13          border-radius : 10px ;
 14      }
 15      
16      input[type="radio"]:checked+label {
 17          /* The background color changes when the label is clicked */ 
18          background-color : aqua ;
 19      }
 20      
21      .row {
 22          display : inline-block ;
 23      }

 

html：

1          < div v-for ="(option, index) in options" > 
2              < p > {{option.name}} </ p > 
3              < div class ="row" v-for ="(item, ind) in option.items" @click ="select(index, ind)" > 
4                  ​​< input type ="radio" :name ="index" :id ="item.id" value ="" > 
5                  <!-- key The name is set to index here, so that the name of each line of options is the same, and the attribute id is consistent with the for attribute of the label -->
6                 <label :for="item.id">{{item.msg}}</label>
7             </div>
8         </div>    

vue instance:

 1         data() {
 2                 return {
 3                     id: ['', '', ''],
 4                     options: [{
 5                         items: [{
 6                             'msg': '绿色',
 7                             "id": "11"
 8                         }, {
 9                             'msg': "红色",
10                             "id": "12"
11                         }],
12                         name: "颜色"
13                     },{
14                         items: [{
15                             'msg': "XXX",
16                             "id": "13"
17                         }, {
18                             'msg': "L",
19                             "id": "14"
20                         }, {
21                             'msg': "XXL",
22                             "id": "15"
23                         }],
24                         name: "型号"
25                     }, {
26                         items:[{
27                             'msg': "32G",
28                             "id": "16"
29                         }, {
30                             'msg': "8G",
31                             "id": "17"
32                         }, {
33                             'msg': "4G",
34                             "id": "18"
35                         }],
36                         name: "版本"
37                     }]
38                 }
39             },
40             methods:{
41                 select(index, ind) {
42                     var itemId = this.options[index].items[ind].id; //Get the selected id number
 43                      this.id.splice(index, 1, itemId); //Replace the corresponding element in the array id[], get all selected ids
 44                      console.log(this.id);
 45                  }
 46              }    

Method 2: Use an array (take each row as the first position of the array eg: a[1] is equivalent to 1 in this array, and the index of the element selected in each row is the element value of the corresponding position of the array eg: a[1] = xx is equivalent to xx here)

css code:

 1     span {
 2         display: inline-block;
 3         padding: 10px 20px;
 4         background-color: #666;
 5         margin-left: 20px;
 6         color: #fff;
 7         border-radius: 10px;
 8     }
 9 
10     .select {
11         background-color: aqua;
12     }
13     
14     .row {
15         display: inline-block;
16     }

html code:

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

Vue instance: (The data in data is omitted like the options above)

1              data() {
 2                    return {
 3                        sel: [],
 4                        id: [], 
　　　　　　　　　　　　　　　options: [],
 5                    }
 6                },
 7                methods: {
 8                    select: function(index, ind) {
 9                           this.sel[index ] = ind; //Let the value of the element at index+1 of the array sel equal to ind
 10                           this.sel = this.sel.concat([]); //Because the array is a reference type, directly assigning a value to one of the variables does not It will affect another variable (the referenced object is not manipulated), use concat (the application object is manipulated)
 11                           this.id[index] = this.options[index].items[ind].id; //Get the selected one id
12                          this.id = this.id.concat([]);
13                          console.log(this.id);
14                   } 
15              }           

Note: The reference type is mentioned in the vue instance method in Method 2. It is recommended to read: https://www.cnblogs.com/gromimiss/p/6066268.html