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>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!
Étapes de création du projet SpringBoot
Comment configurer la mémoire virtuelle de l'ordinateur
utilisation de la fonction
Configurer l'environnement d'exécution Java
Pourquoi ne puis-je pas accéder au navigateur Ethereum ?
réalisation de pages web html
Que peuvent faire les amis de TikTok ?
Qu'est-ce que la programmation de socket
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
