Comment utiliser v-if pour déterminer s'il faut afficher ou masquer des éléments dans Vue

Dans le framework Vue, v-if est une instruction couramment utilisée, utilisée pour déterminer s'il faut afficher ou masquer des éléments en fonction de la valeur d'une expression. Ce qui suit présentera en détail comment utiliser l'instruction v-if.

1. Syntaxe de base

La syntaxe de base de l'instruction v-if est la suivante :

<div v-if="expression">内容</div>

Où, l'expression est une expression JavaScript Si elle est vraie, l'élément actuel sera affiché s'il est faux ; l'élément actuel sera déplacé du DOM supprimé.

2. Exemple

Ce qui suit est un exemple simple utilisant la directive v-if :

<div id="app">
  <p v-if="isShow">这是要显示的内容</p>
</div>

Nous avons remarqué que l'attribut isShow est utilisé dans les données pour contrôler si le contenu du paragraphe doit être affiché. Cette valeur est une valeur booléenne. Lorsque isShow est vrai, le contenu du paragraphe sera affiché, sinon il ne sera pas affiché. Par conséquent, dans Vue, il suffit de modifier la valeur de isShow pour changer l'affichage du contenu.

3. Utilisation de v-if et v-else

En plus de v-if, Vue fournit également la directive v-else pour afficher un élément lorsque l'expression v-if est fausse. L'utilisation de v-else nécessite de le placer sur le même élément DOM que v-if, comme indiqué ci-dessous :

<div id="app">
  <p v-if="isShow">这是要显示的内容</p>
  <p v-else>这是要隐藏的内容</p>
</div>

Dans cet exemple, si isShow est vrai, seul le contenu du premier paragraphe sera affiché ; si isShow est faux, alors seul le contenu du premier paragraphe sera affiché ; le contenu du deuxième paragraphe sera affiché.

4. Utilisation de v-if et v-else-if

Vue fournit également la directive v-else-if pour insérer une condition entre v-if et v-else. v-else-if doit également être placé sur le même élément DOM que v-if, comme indiqué ci-dessous :

<div id="app">
  <p v-if="score >= 90">A级</p>
  <p v-else-if="score >= 80">B级</p>
  <p v-else-if="score >= 70">C级</p>
  <p v-else-if="score >= 60">D级</p>
  <p v-else>不及格</p>
</div>

Dans cet exemple, différents contenus de paragraphe seront affichés en fonction de différentes notes.

5. Résumé

Cet article présente l'utilisation de la directive v-if dans Vue pour déterminer s'il faut afficher ou masquer des éléments en fonction de la valeur d'une expression. Nous pouvons utiliser v-if, v-else ou v-else-if selon les besoins pour déterminer quel élément afficher, obtenant ainsi des effets d'interaction de page plus riches.

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!