vue实现淘宝商品详情页属性选择功能

Posted 2020-11-03 mei1234！

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

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

 

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

css代码：

 

 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         /* 当点击label的时候背景颜色发生改变 */
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                 <!-- 关键在于name这里设为index，让每一行选项的name一样，属性id和label的for属性一致 -->
6                 <label :for="item.id">{{item.msg}}</label>
7             </div>
8         </div>    

vue实例：

 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; //获取选中的id号
43                     this.id.splice(index, 1, itemId); //替换数组id[]中对应的元素，获得所有选中的id
44                     console.log(this.id);
45                 }
46             }    

方法二：利用数组（把每一行当做数组第几个位置eg：a[1]相当于这个数组里的1，每行内选择的元素的索引为数组对应位置的元素值eg：a[1] = xx相当于这里的xx）

css代码：

 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代码：

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实例：（data中的数据和上面的options一样省略啦）

 1             data() {
 2                   return {
 3                       sel: [],
 4                       id: [],
　　　　　　　　　　　　　　　options: [],
 5                   }
 6               },
 7               methods: {
 8                   select: function(index, ind) {
 9                          this.sel[index] = ind; //让数组sel的第index+1的元素的值等于ind
10                          this.sel = this.sel.concat([]); //因为数组是引用类型，对其中一个变量直接赋值不会影响到另一个变量（并未操作引用的对象），使用concat（操作了应用对象）
11                          this.id[index] = this.options[index].items[ind].id; //获取选中的id
12                          this.id = this.id.concat([]);
13                          console.log(this.id);
14                   } 
15              }           

注意：方法二中的vue实例方法中说到引用类型，推荐看：https://www.cnblogs.com/gromimiss/p/6066268.html