Technologie pratique Vue : étude approfondie de v-if, v-show, v-else, v-else-if pour implémenter le rendu conditionnel basé sur les données

Technologie pratique Vue : étude approfondie de v-if, v-show, v-else, v-else-if pour implémenter le rendu conditionnel basé sur les données

Introduction
Vue est un puissant framework front-end, dans quelles conditions les instructions de rendu (v-if, v-show, v-else, v-else-if) peuvent afficher ou masquer dynamiquement des éléments en fonction de l'état des données. Dans cet article, nous examinerons en profondeur ces directives et fournirons des exemples de code concrets pour aider les lecteurs à mieux les comprendre et les utiliser.

Directive v-if La directive
v-if est utilisée pour déterminer s'il faut restituer un élément en fonction de conditions. Lorsque la condition est vraie, l'élément sera rendu, sinon il ne sera pas rendu. Voici un exemple spécifique :

<template>
  <div>
    <p v-if="isUserLoggedIn">用户已登录</p>
    <p v-else>请先登录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUserLoggedIn: true
    }
  }
}
</script>

Dans l'exemple ci-dessus, en fonction de la valeur de isUserLoggedIn, il est décidé s'il faut afficher "L'utilisateur s'est connecté" ou "Veuillez vous connecter d'abord". Lorsque isUserLoggedIn est vrai, affichez "L'utilisateur s'est connecté", sinon affichez "Veuillez vous connecter d'abord". isUserLoggedIn 的值，决定是否渲染 "用户已登录" 或 "请先登录"。当 isUserLoggedIn 为 true 时，渲染 "用户已登录"，否则渲染 "请先登录"。

v-show 指令
v-show 指令与 v-if 类似，都是根据条件来展示或隐藏元素。但不同的是，v-show 不会真正地删除或添加 DOM 元素，而是通过修改元素的 CSS 属性 display 来控制元素的显示与隐藏。下面是一个具体的示例：

<template>
  <div>
    <p v-show="isUserLoggedIn">用户已登录</p>
    <p v-show="!isUserLoggedIn">请先登录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUserLoggedIn: true
    }
  }
}
</script>

在上述示例中，当 isUserLoggedIn 为 true 时，显示 "用户已登录"；当 isUserLoggedIn 为 false 时，显示 "请先登录"。通过修改元素的 display 属性来控制元素的显示与隐藏。

v-else、v-else-if 指令
有时候我们需要在多个条件中选择一个进行渲染，这时可以使用 v-else、v-else-if 指令。v-else 指令用于在 v-if 或 v-else-if 条件不满足时渲染元素，而 v-else-if 则用于在前一个 v-if 或 v-else-if 条件不满足时，判断下一个条件是否满足。下面是一个具体的示例：

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    }
  }
}
</script>

在上述示例中，通过判断 score 的值，渲染不同的评级。如果 score 大于等于 90，则渲染 "优秀"；如果 score

Commande v-show

La commande v-show est similaire à v-if dans la mesure où elle affiche ou masque des éléments en fonction des conditions. Mais la différence est que v-show ne supprime ni n'ajoute réellement d'éléments DOM, mais contrôle l'affichage et le masquage des éléments en modifiant l'attribut CSS display de l'élément. Voici un exemple spécifique :
rrreee

Dans l'exemple ci-dessus, lorsque isUserLoggedIn est vrai, "L'utilisateur est connecté" s'affiche lorsque isUserLoggedIn est faux, " Veuillez d'abord vous connecter". Contrôlez l'affichage et le masquage des éléments en modifiant l'attribut display de l'élément.

Instructions v-else, v-else-if🎜 Parfois, nous devons choisir l'une des multiples conditions de rendu, dans ce cas, nous pouvons utiliser les instructions v-else, v-else-if. La directive v-else est utilisée pour restituer des éléments lorsque la condition v-if ou v-else-if n'est pas remplie, tandis que v-else-if est utilisée pour déterminer quand la condition v-if ou v-else-if précédente est non remplie. Indique si la condition suivante est remplie. Voici un exemple spécifique : 🎜rrreee🎜Dans l'exemple ci-dessus, différentes notes sont rendues en jugeant la valeur de score. Si score est supérieur ou égal à 90, rendez "Excellent" ; si score est supérieur ou égal à 60, rendez "Réussite", sinon rendez "Échec". 🎜🎜Résumé🎜Grâce à une étude approfondie des instructions v-if, v-show, v-else, v-else-if, combinée à des exemples de code spécifiques, nous avons appris à utiliser ces instructions pour implémenter des conditions conditionnelles basées sur les données. rendu. Dans le développement réel, selon différents besoins et scénarios, nous pouvons choisir de manière flexible d'utiliser ces instructions pour contrôler l'affichage et le masquage des éléments de la page, améliorant ainsi l'expérience utilisateur. 🎜🎜J'espère que cet article pourra aider les lecteurs à mieux maîtriser les compétences de rendu conditionnel dans Vue et à améliorer encore les capacités de développement 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!