Maison >interface Web >Questions et réponses frontales >Quelle est l'instruction pour masquer des éléments dans la vue
Quelle est l'instruction pour masquer des éléments dans la vue
- 青灯夜游original
- 2022-12-15 10:37:063487parcourir
La commande pour masquer des éléments dans vue est "v-show". L'instruction v-show détermine si un élément est affiché ou masqué en fonction de la valeur vraie ou fausse de l'expression. La syntaxe est "v-show="expression"". L'instruction v-show contrôle l'état d'affichage et de masquage de l'élément en modifiant l'attribut d'affichage CSS de l'élément. Le contenu de l'expression suivant l'instruction sera finalement analysé en une valeur booléenne lorsque la valeur est vraie (true). l'élément est affiché, et lorsque la valeur est false (false) ) lorsque l'élément est masqué.
L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.
Vue.js fournit une directive v-show, qui détermine si un élément est affiché ou masqué en fonction de la valeur vraie ou fausse de l'expression suivante. La commande
v-show contrôle l'affichage et l'état masqué de l'élément en modifiant l'attribut d'affichage du CSS de l'élément.
Introduction à la commande v-show
La commande v-show doit être suivie d'une variable booléenne ou d'une expression booléenne Lorsque la valeur est vraie, l'élément est affiché, et lorsque la valeur est fausse, l'élément. est caché.
<标签 v-show="true/false"></标签> <!--true:显示 false:隐藏-->
Exemple :
<div id="app">
<p v-show="flag == '显示'">Vue 课程</p>
</div><script>
var app = new Vue({
el: '#app',
data: {
flag: '隐藏'
}
});
</script>Lorsque le drapeau est défini sur « Masquer », « Vue Course » ne sera pas affiché ; lorsque le drapeau est défini sur « Afficher », « Vue Course » sera affiché.
En fait, lorsque le drapeau est défini sur "caché", l'affichage de l'attribut CSS de l'élément p est défini sur aucun, donc l'élément est masqué.
Le code rendu est le suivant :
<p style="display: none;">Vue 课程</p>
Exemple de code v-show
Voici des exemples de code html et js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>v-show指令</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示" @click="changeIsShow" />
<p v-show="isShow">不装了，我摊牌了，没错你要找的就是我</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
changeIsShow(){
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>Le code rendu est le suivant
<p style="display: none;">不装了，我摊牌了，没错你要找的就是我</p>
Le résultat d'exécution du code est comme suit :
Résumé
La fonction de la commande v-show est de changer l'état d'affichage de l'élément en fonction de la valeur vraie et fausse
-
Le principe est de modifier l'attribut CSS (affichage) de l'élément pour décider de l'afficher ou de le masquer
Le contenu après l'instruction sera finalement analysé en une valeur booléenne
Lorsque la valeur est vraie (true), l'élément est affiché, et lorsque la valeur est fausse (faux), l'élément est masqué
Qu'en est-il de l'élément correspondant une fois les données modifiées ? L'état d'affichage sera également mis à jour de manière synchrone
[Recommandations associées : vuejs. tutoriel vidéo, développement web front-end]
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!