Sélection complète et sélection inverse en vue-js tutoriel-php.cn

Sélection complète et sélection inverse en vue

php中世界最好的语言

Libérer： 2018-04-12 17:16:09

original

1808 Les gens l'ont consulté

Cette fois, je vais vous présenter la sélection complète et la sélection inverse en vue. Quelles sont les précautions pour toute sélection et sélection inverse en vue. Ce qui suit est un cas pratique, prenons un. regarder.

Je ne dirai plus de bêtises et passons directement au 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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment NodeJS implémente la fonction WebSocket

CDN accélère le processus de création de fichiers d'empaquetage de réaction Webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!