Vue训练——实现简单的全选和反选功能

AnYaWhite

已于 2022-04-28 16:33:53 修改

阅读量2.7k

点赞数 2

分类专栏： Vue训练文章标签： vue.js

于 2022-04-28 11:46:42 首次发布

本文链接：https://blog.csdn.net/weixin_52335574/article/details/124470142

版权

Vue实现简单的全选和反选功能

实现全选和反选需要遍历对各对象的值，我们可以通过方法实现，也可以通过计算机域实现。

建立好多个选项框，对全选和反选与数组中的数据进行绑定——v-model。（反选通过@change = ”inverses“ 声明一个方法）
通过v-for=”（item，index）in data“ ：key=”index“ 遍历对象获取其中的值。
在中set（）中获取全选框中状态。get（）则是获取每个选项中的状态是true/false。
在inverses方法中进行反选

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>联系全选和反选</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
		<div id="app">
			<h3>爱好</h3>
			 <!-- v-model 关联全选按钮的 选中 状态 -->
			全选<input type="checkbox"   v-model="all" />
			<!-- 给 反选 按钮绑定点击事件 -->
			反选<i

最低0.47元/天解锁文章

AnYaWhite

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue训练——实现简单的全选和反选功能

Vue实现简单的全选和反选功能     实现全选和反选需要遍历对各对象的值，我们可以通过方法实现，也可以通过计算机域实现。建立好多个选项框，对全选和反选与数组中的数据进行绑定——v-model。（反选通过@change = ”inverses“ 声明一个方法）通过v-for=”（item，index）in data“ ：key=”index“ 遍历对象获取其中的值。在中set（）中获取全选框中状态。get（）则是获取每个选项中的状态是true
复制链接

扫一扫