Maison > Article > interface Web > Comment masquer ou afficher des éléments dans vue.js
Comment masquer ou afficher des éléments dans vue.js
- 王林original
- 2021-10-09 17:10:124645parcourir
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!