Vue全选示例

最新推荐文章于 2023-03-17 11:05:47 发布

ACGuan

最新推荐文章于 2023-03-17 11:05:47 发布

阅读量242

点赞数

分类专栏： Vue Web前端

本文链接：https://blog.youkuaiyun.com/csdnlinyongsheng/article/details/107163148

版权

Web前端同时被 2 个专栏收录

85 篇文章

订阅专栏

Vue

12 篇文章

订阅专栏

本文将详细讲解如何在Vue项目中实现全选和反选的功能。通过实例代码，我们将展示如何使用v-model和计算属性来同步checkbox的状态，以及如何在数据更新时响应式地更新视图。无论你是Vue初学者还是有经验的开发者，这个教程都将帮助你更好地理解和应用Vue的双向数据绑定特性。

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

<div>
	<div>
		<input type="checkbox" @click="checkAll" v-model="checked">
		<span>全选</span>
	</div>
	<ul>
		<li v-for="(item,index) in list" :key="index" style="margin-top:20px;">
			<input type="checkbox" v-model="checkModel" :value="item.id">
			<span>{{item.name}}--</span>
			<span>{{item.age}}--</span>
			<span>{{item.money}}元</span>
		</li>
	</ul>
</div>
<script>
	export default{
		data: function(){
			return {
				checked:false,
				checkModel:[],
				list:[
					{id:1,name:"明明",age:23,money:100},
					{id:2,name:"明明",age:23,money:100},
					{id:3,name:"明明",age:23,money:100},
					{id:4,name:"明明",age:23,money:100}
				],
			}
		},
		watch:{
			checkModel(){
				if(this.checkModel.length == this.list.length){
					this.checked = true;
				}
				else{
					this.checked = false;
				}
			}
		},
		methods:{
			checkAll(){
				if(this.checked){
					this.checkModel = []
				}
				else{
					this.list.forEach((item) => {
						if(this.checkModel.indexOf(item.id) == -1){
							this.checkModel.push(item.id);
						}
					})
				}
				console.log(this.checkModel);
				
			}
		}
	}
</script>