vue实现全选、反选功能
内容摘要
这篇文章主要为大家详细介绍了vue实现全选、反选功能，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
用vue写业务代码时候，后端大神丢给我
对此感兴趣的朋友，看看idc笔记做的技术笔记！
用vue写业务代码时候，后端大神丢给我
文章正文
这篇文章主要为大家详细介绍了vue实现全选、反选功能，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
用vue写业务代码时候，后端大神丢给我一堆数据，要求是做全选，反选功能，然后把用户更改的数据全部返回给他
基本思路
如果父级选中了，那么父级下面的子集全部选中checked=true;
如果子集中选中了一个，那么父级应该被勾选中
如果子集一个都没有选中，那么父级此时应该没有选中
最后提交用户改变后的数组
（大神原谅我的啰嗦哈）
开始上代码
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/role.css" rel="external nofollow" >
</head>
<body>
<div id="content" v-cloak>
<form @submit.prevent="submit">
<div class="list" v-for="item in addList">
<h3 class="title">
<label for=""><input type='checkbox' class='item-check-btn' v-model="item.checked" @click="selectAll(item)"></label>
{{item.name}}
</h3>
<ul class="menu">
<li v-for="(s,index) in item.children">
<label for="">
<input type='checkbox' :value="index" v-model="s.checked" class='item-check-btn' @click="selectItem(item,s,index)">
</label>
{{s.name}}
</li>
</ul>
</div>
<div class="bottom_btn">
<input type="submit" value="确认选择" class="btn">
</div>
</form>
</div>
</body>
<script src="js/lib/vue.js"></script>
<script src="1.js"></script>
</html>
这是html结构部分
基本上没有啥好讲的
只能说一句（我曹，v-for和v-model，真他M的方便呀，哈哈哈哈
注：关于vue实现全选、反选功能的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
