Home >Web Front-end >JS Tutorial >Select all and invert selection in vue

Select all and invert selection in vue

亚连Original: 2018-06-06 14:59:072115browse

Below I will share with you an implementation method of vue full selection and inverse selection (no bugs, novices can read it), which has a good reference value and I hope it will be helpful to everyone.

I won’t say any more nonsense and let’s get straight to the code!

<!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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement global registration and local registration in vue components

How to implement custom global methods in vue

How to implement data interaction between sub-sibling components in Vue2.0

The above is the detailed content of Select all and invert selection in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to make the requirement of unlimited loading of data at the bottom of the sliding pageNext article：How to make the requirement of unlimited loading of data at the bottom of the sliding page

See more

Select all and invert selection in vue

Related articles