方法一是自己想出来的,方法二来自忘记哪里看到的了
不知道是不是你要的效果:
方法一:利用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
原文地址:https://www.cnblogs.com/mei1234/p/9008730.html
时间: 2024-11-05 20:45:28