vue checkbox 默认选中

最新推荐文章于 2025-04-16 14:27:38 发布

我是大头鸟

最新推荐文章于 2025-04-16 14:27:38 发布

阅读量1.8w

点赞数 1

分类专栏： javaScript 文章标签： vue checkbox

本文链接：https://blog.csdn.net/datouniao1/article/details/90767557

版权

javaScript 专栏收录该内容

61 篇文章

订阅专栏

本文介绍如何使用Vue.js创建一个角色选择器组件，通过v-model双向绑定来预选特定角色，实现动态更新已选角色ID。代码示例展示了如何初始化组件并设置默认选中的角色ID。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="form-group" id="rolelist">
	 <div class="col-xs-12">
		<label for="exampleInputPassword1">角色</label>
			<div class="form-group" v-for="(item,index) in data">
				<div class="checkbox">
					<label><input v-bind:value=item.id type="checkbox"  v-model='checkedIds' v-bind:data=item.rolename>{{item.rolename}}</label>
				</div>
			</div>
		</div>
</div>

重要的是属性: v-model='checkedIds'

	/**
	 * 获取到对应的可选角色
	 */
	execFunc("userrole.getrolelist", {}, function(result) {
		var vu = new Vue({
			el : '#rolelist',
			data : {
				checkedIds:[],
				data : []
			}
		});
		var strs = new Array(); // 定义一数组
		strs = hroleid.split(";");
		vu.data = result.data;
		vu.checkedIds=strs;
	})

我们在后台给checkedIds 赋值一个数组，里面是我们要默认选中的id