suchen

Heim  >  Artikel  >  Web-Frontend  >  Vollständige Auswahl und umgekehrte Auswahl in Vue

Vollständige Auswahl und umgekehrte Auswahl in Vue

php中世界最好的语言
php中世界最好的语言Original
2018-04-12 17:16:091844Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die gesamte Auswahl und die umgekehrte Auswahl in vue vorstellen sehen.

Ich werde keinen Unsinn mehr sagen und kommen wir direkt zum 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>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie NodeJS die WebSocket-Funktion implementiert

CDN beschleunigt den React-Webpack-Verpackungsdateiprozess

Das obige ist der detaillierte Inhalt vonVollständige Auswahl und umgekehrte Auswahl in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php webpack websocket
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie vue+checkbox die Datenbindung, -erfassung und -berechnung durchführtNächster Artikel：Wie vue+checkbox die Datenbindung, -erfassung und -berechnung durchführt

In Verbindung stehende Artikel

Mehr sehen