Vue中数组循环添加单选框问题

前言

今天在写一个通过v-for来循环数组,并且在每一条数据中添加单选框功能。然后这边的写法与正常添加单选框参数有点不一样,如下。

1、常规情况下添加单选框:
<body>
	<div id="example-4">
	====================正常添加单选框====================
		<br>
	    <input type="radio" id="one" value="One" v-model="picked1">
	  	<label for="one">One</label>
		<br> 
	 	<input type="radio" id="two" value="Two" v-model="picked1">
	  	<label for="two">Two</label>
	</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	new Vue({
	  el: '#example-4',
	  data: {
	    picked1: '',
	  }
	})
</script>
</html>

结果如下:
可以正常操作

2、通过v-for循环情况下添加单选框:

(1)问题误区:不能直接按照正常的情况下 编辑 id value for 三个参数

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="example-4">
		====================通过vue数组循环添加单选框====================
		<br>
	 	<div v-for="item in sum">
	 		<input type="radio" id="item.order" value="item.value" v-model="picked2">
	 		<label for="item.order">{{item.value}}</label>
	 	</div>
	</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	new Vue({
	  el: '#example-4',
	  data: {
	    picked2: '',
	    sum: [
	    	{ order: "one",value: "One"},
	    	{ order: "two",value: "Two"}
	    ]
	  }
	})
</script>
</html>

结果如下:当你随便选择一个单选框时,所有的单选框都会被选中。
不能正常操作

(2)解决方案:需要在 id value for 前面都添加一个 冒号,例如: “:id” “:value” ":for"

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="example-4">
		====================通过vue数组循环添加单选框====================
		<br>
	 	<div v-for="item in sum">
	 		<input type="radio" :id="item.order" :value="item.value" v-model="picked2">
	 		<label :for="item.order">{{item.value}}</label>
	 	</div>
	</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	new Vue({
	  el: '#example-4',
	  data: {
	    picked2: '',
	    sum: [
	    	{ order: "one",value: "One"},
	    	{ order: "two",value: "Two"}
	    ]
	  }
	})
</script>
</html>

结果如下:功能跟正常情况下一样。

可以正常操作

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
回答: 在Vue循环生成的多个单选框,可以通过添加一个label元素来调整单选框的样式。首先,需要将input元素的display属性设置为none,以隐藏它。然后,通过调整label元素的样式来实现自定义的单选框样式。可以设置label元素的宽度、高度、显示方式、位置等属性来调整样式。可以使用label:active伪类来设置选时的背景色。此外,可以使用label:after伪元素来添加一个圆形的选状态图标。当input元素被选时,可以使用input:checked + label:after选择器来改变选状态图标的背景颜色。在Vue循环,可以使用v-for指令来遍历一个数组,并生成多个单选框。每个单选框需要设置一个唯一的id属性,并将其与label元素的for属性绑定,以实现关联。同时,可以使用v-model指令来绑定选的值。例如,在循环生成的单选框代码如下所示: ```html <div class="div" v-for="(item, index) in sizes" :key="index"> <div class="left"> <input :id="index" type="radio" name="size" v-model="size" :value="item.goodsName" class="radio_type" @click="check(index)" /> <label :for="index"></label> <i>{{ item.goodsName }}</i> </div> </div> ``` 在上述代码,v-for指令用于循环生成多个单选框,每个单选框都有一个唯一的id属性,与label元素的for属性绑定。input元素使用v-model指令来绑定选的值,点击单选框时会触发check方法。在check方法,可以根据需要对选状态进行处理。例如,可以将选的索引值赋给一个变量current,以实现选状态的切换。 ```javascript check(index) { if (index !== this.current) { this.current = index; } else { this.current = -1; } } ``` 以上是一个示例,根据具体需求可以进行相应的修改和扩展。 #### 引用[.reference_title] - *1* [关于在vue循环生成的单选框调样式问题](https://blog.csdn.net/old_Bai/article/details/118669927)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [(vue) 循环实现单选](https://blog.csdn.net/weixin_42069147/article/details/102495850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值