Compétences essentielles pour les débutants pour apprendre Vue : maîtriser le rendu conditionnel v-if, v-show, v-else, v-else-if

Compétences essentielles pour les débutants dans Vue : Maîtrisez v-if, v-show, v-else, v-else-if, des exemples de code spécifiques sont requis

Introduction :
Vue.js est un front- framework JavaScript final qui fournit des outils et des fonctionnalités puissants pour créer des interfaces utilisateur interactives. Dans Vue, v-if, v-show, v-else et v-else-if sont des instructions de rendu conditionnel couramment utilisées qui permettent d'afficher ou de masquer des éléments en fonction de conditions spécifiques. Dans cet article, nous présenterons l'utilisation de ces instructions et aiderons les débutants à comprendre et à maîtriser ces compétences à travers des exemples de code spécifiques.

1. Instruction v-if
L'instruction v-if est l'une des instructions de rendu conditionnel les plus couramment utilisées dans Vue. Elle détermine s'il faut restituer un élément en fonction de la valeur d'une expression donnée. Si l’expression est évaluée à vrai, l’élément sera rendu ; si elle est évaluée à faux, l’élément sera supprimé.

Voici un exemple simple montrant l'utilisation de la directive v-if :

<template>
  <div>
    <p v-if="isShow">这是一个v-if指令的示例</p>
  </div>
</template>

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

Dans le code ci-dessus, nous avons défini un attribut isShow dans data et défini sa valeur initiale sur true. Dans le modèle, nous utilisons la directive v-if pour déterminer s'il faut afficher l'élément <p></p>. Puisque la valeur de isShow est vraie, l'élément sera rendu. <p></p>元素。由于isShow的值为true，所以该元素会被渲染。

二、v-show指令
v-show指令与v-if指令类似，也是根据给定的表达式的值来决定元素是否显示。不同的是，v-show指令会保留元素的DOM结构，只是通过CSS样式来控制元素的显示和隐藏。

下面是一个简单的示例，展示了v-show指令的用法：

<template>
  <div>
    <p v-show="isShow">这是一个v-show指令的示例</p>
  </div>
</template>

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

在上面的代码中，我们在data中定义了一个isShow属性，并将其初始值设置为true。在模板中，我们使用v-show指令来决定是否显示<p></p>元素。由于isShow的值为true，所以该元素会被显示。

三、v-else指令
v-else指令用于在上一个带v-if或v-else-if的元素后面添加一个“else”条件块。它没有表达式，只需在v-else中使用，表示不满足前面的条件时，渲染该元素。

下面是一个简单的示例，演示了v-else指令的用法：

<template>
  <div>
    <p v-if="isShow">这是一个v-if指令的示例</p>
    <p v-else>这是一个v-else指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

在上面的代码中，我们根据isShow的值来决定显示哪个<p></p>元素。由于isShow的值为false，所以v-if条件不满足，将显示v-else指令后面的<p></p>元素。

四、v-else-if指令
v-else-if指令用于在v-if或v-else-if指令后面添加一个“else if”条件块。它接收一个表达式，并根据该表达式的值来判断是否渲染该元素。

下面是一个简单的示例，演示了v-else-if指令的用法：

<template>
  <div>
    <p v-if="type === 'info'">这是一个信息提示</p>
    <p v-else-if="type === 'warning'">这是一个警告提示</p>
    <p v-else-if="type === 'error'">这是一个错误提示</p>
    <p v-else>这是一个未知提示</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'warning'
    }
  }
}
</script>

在上面的代码中，我们根据type的值来判断显示哪个<p></p>元素。由于type的值为'warning'，所以v-else-if指令中的条件被满足，将显示“这是一个警告提示”这个<p></p>

2. Instruction v-show

L'instruction v-show est similaire à l'instruction v-if. Elle détermine également si l'élément est affiché en fonction de la valeur de l'expression donnée. La différence est que l'instruction v-show conserve la structure DOM de l'élément et contrôle uniquement l'affichage et le masquage de l'élément via les styles CSS.

Voici un exemple simple montrant l'utilisation de la directive v-show : 🎜rrreee🎜Dans le code ci-dessus, nous définissons un attribut isShow dans data et définissons sa valeur initiale sur true. Dans le modèle, nous utilisons la directive v-show pour décider d'afficher ou non l'élément <p></p>. Puisque la valeur de isShow est vraie, l'élément sera affiché. 🎜🎜3. Instruction v-else 🎜 L'instruction v-else est utilisée pour ajouter un bloc conditionnel "else" après l'élément précédent avec v-if ou v-else-if. Il n'a pas d'expression et ne peut être utilisé que dans v-else pour indiquer que l'élément sera rendu lorsque les conditions précédentes ne sont pas remplies. 🎜🎜Ce qui suit est un exemple simple illustrant l'utilisation de la directive v-else : 🎜rrreee🎜Dans le code ci-dessus, nous décidons quel élément <p></p> afficher en fonction de la valeur de isShow. Puisque la valeur de isShow est fausse, la condition v-if n'est pas remplie et l'élément <p></p> suivant la directive v-else sera affiché. 🎜🎜4. Instruction v-else-if 🎜 L'instruction v-else-if est utilisée pour ajouter un bloc conditionnel "else if" après l'instruction v-if ou v-else-if. Il reçoit une expression et détermine s'il faut restituer l'élément en fonction de la valeur de l'expression. 🎜🎜Ce qui suit est un exemple simple qui démontre l'utilisation de la directive v-else-if : 🎜rrreee🎜Dans le code ci-dessus, nous déterminons quel élément <p></p> afficher en fonction de la valeur de type. Puisque la valeur de type est 'warning', la condition de la directive v-else-if est remplie et l'élément <p></p> "Ceci est une invite d'avertissement" sera affiché. 🎜🎜Résumé : 🎜v-if, v-show, v-else et v-else-if sont des instructions de rendu conditionnel couramment utilisées dans Vue, grâce auxquelles nous pouvons afficher ou masquer dynamiquement des éléments. Dans certains scénarios spécifiques, nous pouvons choisir quelle instruction utiliser en fonction des conditions. La maîtrise de ces instructions est très importante pour les développeurs qui débutent avec Vue. Grâce aux exemples de code spécifiques présentés dans cet article, les débutants peuvent comprendre et appliquer ces instructions plus clairement, améliorant ainsi leurs capacités de développement Vue. 🎜

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!