Comment masquer ou afficher des éléments dans vue.js : utilisez la directive v-show pour y parvenir, par exemple [window.onload = function(){var vm = new Vue({el:'#box',data: {isShow:false ,},metho...]
L'environnement d'exploitation de cet article : système windows10, vue.js 2.9, ordinateur thinkpad t480
Si nous voulons contrôler le masquage ou l'affichage de. éléments, nous pouvons utiliser la commande v-show.
La commande v-show est utilisée pour contrôler l'affichage ou le masquage des éléments
v-show="true/false" //控制元素显示/隐藏
Exemple :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
isShow:false,
},
methods:{
toggle:function(){
this.isShow = !this.isShow;
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="toggle" v-on:click="toggle()"> <br />
<div v-show="isShow" style="width: 100px;height: 100px;background: red"></div>
</div>
</body>
</html>Apprentissage recommandé : formation php
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!
Comment trouver la valeur maximale et minimale d'un élément de tableau en Java
Pourquoi vue.js signale-t-il une erreur ?
Quelles sont les utilisations des slots vue.js ?
Comment sauter avec des paramètres dans vue.js
Introduction aux types d'interfaces de disque dur
Comment utiliser mois_entre dans SQL
Comment implémenter la fonction carrousel CSS
Quels sont les logiciels bureautiques
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
