这次给大家带来在vue中的全选与反选，在vue中全选与反选的注意事项有哪些，下面就是实战案例，一起来看一下。
我就废话不多说，直接上代码吧！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<p id="app">
<p style="padding-left: 20px">
<ul style="margin-bottom: 20px">
<li v-for="(item, index) in prodata">
<input type="checkbox" :value="index" v-model="selectarr">{{item.name}}
</li>
</ul>
<label>
<input type="checkbox" @click="selectall" :checked="checked"/>全选
</label>
</p>
</p>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new vue({
el : #app,
data : {
prodata: [
{
name: 张三
}, {
name: 李四
}, {
name: 王五
}, {
name: 赵六
}
],
selectarr: [],
checked : false
},
watch : {
selectarr(curval){
if(curval.length == this.prodata.length){
this.checked = true
}else{
this.checked = false
}
}
},
methods: {
selectall(event){
if (!event.currenttarget.checked) {
this.selectarr = [];
} else { //实现全选
this.selectarr = [];
this.prodata.foreach((item, i) =>{
this.selectarr.push(i);
});
}
}
}
})
</script>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
nodejs怎么实现websocket功能
cdn加速react webpack打包文件过程
以上就是在vue中的全选与反选的详细内容。