vue v-for 循环复选框-默认勾选第一个的实现方法

最新推荐文章于 2024-06-03 16:20:19 发布
最新推荐文章于 2024-06-03 16:20:19 发布
阅读量2.4w 收藏 9
点赞数 4
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wax9092/article/details/78659332
版权

应用场景：在进行多选的时候一般默认显示第一个。

实现方法：纯vue实现

例子：<span v-for="(one,index) in site"><input  type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label></span>

          //:checked="index == 0"为索引为0的，即为第一个复选框添加属性。

拓展：默认被选中的复选框，只需要index指定即可。

          一定要多动脑~~~

补充：上述描述比较空下面给一个单选和多选的例子，可以直接贴到菜鸟运行看效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <span v-for="(one,index) in site"><input  type="checkbox" :checked="checked==index" @change="get(index)"><label>{{one.name}}</label></span>
  <span v-for="(item,index) in list"><input  type="checkbox" :checked="checkedMore.includes(index)" @change="getMore(index)"><label>{{item.name}}</label></span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    	message: 'Hello Vue.js!',
	  	site:[{name:'454'},{sex:'55'}],
	    list:[{name:'男'},{sex:'女'}],
	  	checked:0,
	  	checkedMore:[0]
  },
	methods:{
		get(index){
			this.checked = index;
			
		},
		getMore(index){
			this.checkedMore.push(index)
		}
	}
})
</script>
</body>
</html>

 

wax9092
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于vue v-for 循环复选框-默认勾选第一个的实现方法
12-29
应用场景：在进行多选的时候一般默认显示第一个。 实现方法：纯vue实现 例子： <span v-for=(one,index)><input type=checkbox :...以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给
vue中使用Checkbox 多选框循环遍历
热门推荐
weixin_43549979的博客
08-20 1万+
首先效果展示 步骤如下： 1、html <el-form> <el-form-item v-for="(item, index) in dataList" :key="index"> <el-checkbox @change="(val) => handleCheckAllListChange(val, item)" :indeterminate="itemIndet
el-radio动态获取数据， 默认选中第一个
T70H78的博客
10-15 7742
<el-radio-group v-model="attenceId" > <el-radio v-for="item in factoryList" :label="item.attenceId" :key="item.attenceId" >{{item.attenceName}
【踩坑记录：＜el-radio＞单选按钮v-for里实现每个选择项单独提示】
最新发布
weixin_44126778的博客
06-03 351
v-for里实现每个选择项的tip
在vue中将v-for循环出来的复选框如何实现单选、多选、全选，以及如何将复选框的样式由默认样式改为圆形
qq_69635978的博客
10-17 1906
用v-for循环出来的复选框如何实现单选、多选、全选，以及如何将复选框的样式由默认样式改为圆形
ant design vue 循环渲染复选框以及获取复选框获的值
潮汐未见潮落的博客
07-05 4475
ant design vue 循环渲染复选框以及获取复选框获的值
Vue指令 v-for遍历、下拉列表、单选框、复选框
hangnan315的博客
06-22 8223
4 、v-for遍历 4.1 遍历数组中的对象 格式：v-for="item in list" 里面也可以返回下标 格式：v-for="（item.index） in list" item:可以自定义变量这个值，但是里面的 {{item.id}}中的item需要跟自定义的这个值一致 <li v-for='item in list'> {{item.id}}---{{item.name}}---{{item.age}} </li> let vue = n
Vue中控制v-for循环次数的实现方法
10-17
今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于vue v-for循环解决img标签的src动态绑定问题
10-18
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue通过for循环生成的checkbox点击一个选中全部的问题
Zemor笔记本
04-08 1万+
重点在input的绑定属性value上，如果写成 <tr v-for="(item,index) in list"> <td> <input type="checkbox" :id="index" value="item.id" v-model="checkedItem"> </td> <td>{...
vue --- > v-for给input绑定值,并实现checkbox的全选
栗子好好吃的博客
06-30 6821
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <input type="checkbox" v-model="checkedAll" id="all" @click="s...
vue v-for循环checkbox存在的问题
weixin_30570101的博客
08-10 3793
项目中，需要动态循环 checkbox(也就是多选框)。 <span v-for="(item, index) in data"> <input type="checkbox">单选 </span>　　　 　　像这种情况，会触发点击多选框出现 ‘选不中’ 获取 ‘取消不了’。 查阅资料，很多人没有发现此类问题，后来想到了官网上的 v...
Vue实现v-for生成标签后默认展示第一个
qq_24243695的博客
01-29 4791
<template> <div> <ul> <li v-for="(item, index) in list1" @mouseenter="handleMouseEnter" :id="index"></li> </ul> <div> <div v-for="(item, index...
vue复选框的用法，单个,多个复选框（简单demo代码全）点击复选框事件
boy火巨的博客
02-17 8254
上图 样式是默认的，其实自己可以改些CSS样式更好看些 代码全： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 单个,多个复选框</title> <script src="https://cdn.staticf...
v-for循环中点击当前元素高亮显示
weixin_30621959的博客
07-23 1026
<a v-for="(cate,index) in categlory" :key="cate.id" @click="queryAppsByCate (cate.id,index)" :class="{active:index==isActive}"> 　　{{cate.name}} </a> 　　 定义isActive=0，默认高亮第一个元素 ...
vue嵌套循环数组，选中其中某一项，添加选中的样式
null_NaN的博客
03-27 1555
效果图： 拓展：在一个组件实例中，只有在data里初始化的数据才是响应的，Vue2不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。 数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测 push()，pop()，shift()，unshift()，splice()，sort()，reverse()可被vue检测到 filter(), concat(), sl
v-for遍历对象
lzh的博客
02-04 8728
v-for遍历对象 在遍历对象的过程中，如果只是获取一个值，那么获取到的是value <ul> <li v-for="item in info">{{item}}</li> </ul> 获取key和value（value，key） <ul> <li v-for="(value,key) in info">{{value}}-{{key}}</li> </ul> 获取key和value和inde
使用v-for创建复选框
03-19
使用v-for指令可以在Vue.js中创建复选框。v-for指令用于循环渲染一个数组或对象的元素。下面是使用v-for创建复选框的步骤： 1. 在Vue实例的data属性中定义一个数组，用于存储复选框的选项。例如，可以定义一个名为options的数组，其中包含多个选项对象，每个对象包含一个value属性和一个label属性。 2. 在模板中使用v-for指令来循环渲染复选框。可以使用v-bind指令将每个选项的value绑定到复选框的value属性上，并使用{{}}语法将每个选项的label显示在复选框旁边。 3. 为了实现双向绑定，可以使用v-model指令将复选框的值绑定到Vue实例中的一个数组属性上。这样，当用户选择或取消选择复选框时，Vue会自动更新数组的值。 下面是一个示例代码： ```html <template> <div> <label v-for="option in options" :key="option.value"> <input type="checkbox" v-bind:value="option.value" v-model="selectedOptions"> {{ option.label }} </label> </div> </template> <script> export default { data() { return { options: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } ], selectedOptions: [] }; } }; </script> ``` 在上面的示例中，options数组包含三个选项对象。selectedOptions数组用于存储用户选择的选项值。通过v-for指令，每个选项都会被渲染成一个复选框，并且通过v-model指令与selectedOptions数组进行双向绑定。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值