Quelle est l'instruction pour masquer des éléments dans la vue-Questions et réponses frontales-php.cn

Quelle est l'instruction pour masquer des éléments dans la vue

青灯夜游

Libérer： 2022-12-15 10:37:06

original

3445 Les gens l'ont consulté

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é.

Quelle est l'instruction pour masquer des éléments dans la vue

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:隐藏-->

Copier après la connexion

Exemple :

<div id="app">
    <p v-show="flag == &#39;显示&#39;">Vue 课程</p>
</div>

Copier après la connexion

<script>
    var app = new Vue({
        el: &#39;#app&#39;,
        data: {
            flag: &#39;隐藏&#39;
        }
    });
</script>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Le code rendu est le suivant

<p style="display: none;">不装了，我摊牌了，没错你要找的就是我</p>

Copier après la connexion

Le résultat d'exécution du code est comme suit :

Quelle est linstruction pour masquer des éléments dans la vue

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!