vue v-modal 实现 input 全选

最新推荐文章于 2025-07-03 09:31:20 发布

原创最新推荐文章于 2025-07-03 09:31:20 发布 · 790 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #v-modal

随笔专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Vue.js框架实现input元素的全选功能。通过v-model指令绑定复选框状态，配合v-for循环遍历后台数据，实现全选与单项选择的同步更新。示例中展示了具体的HTML结构与Vue实例配置。

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

vue v-modal 实现 input 全选

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
</head>
<body>
	<div id="app">
		<div class="checkbox">
			<label>
				<input  type="checkbox" v-model='checked'> 全选
			</label>
			<label v-for="item in ajaxData">
				<!-- v-model 双向数据绑定命令 -->
				<input class="checkItem" :checked="checked" type="checkbox"  > 
				<span>{{item.name}}{{checked}}</span>
			</label>
		</div>
	</div>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data(){
				
				return {
					ajaxData: [{ // 后台请求过来的数据
						name: '选项1',
						value: 'apple'
					},{
						name: '选项2',
						value: 'banana'
					},{
						name: '选项3',
						value: 'orange'
					}],
					checked:false,
				}
			}
		});
	</script>

</body>