vue v-modal 实现 input 全选

最新推荐文章于 2025-02-27 00:30:35 发布

qq_39490545

最新推荐文章于 2025-02-27 00:30:35 发布

阅读量779

点赞数

分类专栏：随笔文章标签： vue v-modal

本文链接：https://blog.youkuaiyun.com/qq_39490545/article/details/88556440

版权

随笔专栏收录该内容

1 篇文章

订阅专栏

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>