vue实现全选反选
Posted simple不简单
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue实现全选反选相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选</title>
<script src="js/vue.js"></script>
</head>
<body>
<h1>全选反选</h1>
<div id="vm1">
<label><input type="checkbox" v-model="allData.parCheck" @change="allSelect()">{{allData.text}}</label>
<ul>
<li v-for="item in checkData">
<label><input type="checkbox" v-model="item.isCheck" @change="singleSelect()">{{item.text}}</label>
</li>
</ul>
</div>
<script>
var vm1=new Vue({
el:‘#vm1‘,
data:{
allData:{text:‘全选‘,parCheck:false},
checkData:[
{text:‘苹果‘,isCheck:false},
{text:‘香蕉‘,isCheck:false},
{text:‘西瓜‘,isCheck:false}
]
},
methods:{
//全选
allSelect:function(){
var vm1=this;
vm1.checkData.forEach(function(item){
item.isCheck=vm1.allData.parCheck;
})
},
//单选
singleSelect:function(){
var vm1=this;
var selectData=vm1.checkData.filter(function(item){
return item.isCheck==true;
})
selectData.length==vm1.checkData.length? vm1.allData.parCheck=true:vm1.allData.parCheck=false;
}
}
})
</script>
</body>
</html>
以上是关于vue实现全选反选的主要内容，如果未能解决你的问题，请参考以下文章
vue-cli实现最简单的全选全不选反选功能。不容错过呦！！！！！话不多说直接上代码。。。。