Technologie avancée Vue : compréhension approfondie des principes de mise en œuvre de v-if, v-show, v-else, v-else-if

Technologie avancée Vue : compréhension approfondie des principes d'implémentation de v-if, v-show, v-else, v-else-if, des exemples de code spécifiques sont requis

Dans Vue, v-if, v -show, v-else et v-else-if sont des instructions de rendu conditionnel couramment utilisées, qui peuvent contrôler l'affichage et le masquage d'éléments en fonction de conditions. Bien que ces instructions soient courantes en développement, leurs principes de mise en œuvre ne sont pas très clairs. Cet article analysera en profondeur les principes d'implémentation de v-if, v-show, v-else et v-else-if, et donnera des exemples de code spécifiques.

1. Principe de mise en œuvre de v-if
v-if est une instruction de rendu conditionnel, qui détermine s'il faut restituer un élément ou un composant en fonction de conditions. Lorsque la condition est vraie, l'élément ou le composant correspondant est rendu ; lorsque la condition est fausse, l'élément ou le composant correspondant n'est pas rendu. Le principe de mise en œuvre de v-if est le suivant :

1. Vue évaluera d'abord l'expression de v-if pour déterminer si la condition est vraie.
2. Si la condition est vraie, Vue créera et insérera l'élément ou le composant correspondant.
3. Si la condition est fausse, Vue détruira l'élément ou le composant correspondant et le supprimera du DOM.

Exemple de code :

<template>
  <div>
    <h1 v-if="show">Hello World!</h1>
  </div>
</template>

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

Dans l'exemple de code ci-dessus, lorsque show est vrai, "

Hello World!

" est rendu lorsque show est faux, l'élément n'est pas rendu.

2. Le principe d'implémentation de v-show
v-show est également une instruction de rendu conditionnel. Il a une fonction similaire à v-if et peut contrôler l'affichage et le masquage des éléments en fonction des conditions. La différence est que v-show ne détruit pas l'élément, mais contrôle l'affichage et le masquage de l'élément en modifiant l'attribut display de l'élément. Le principe de mise en œuvre de

v-show est le suivant :

1. Vue évaluera d'abord l'expression de v-show pour déterminer si la condition est vraie.
2. Si la condition est vraie, Vue définira l'attribut d'affichage de l'élément à sa valeur d'origine.
3. Si la condition est fausse, Vue définira l'attribut d'affichage de l'élément sur aucun.

Exemple de code :

<template>
  <div>
    <h1 v-show="show">Hello World!</h1>
  </div>
</template>

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

Dans l'exemple de code ci-dessus, lorsque show est vrai, l'élément est affiché en définissant « display : block » ; lorsque show est false, l'élément est masqué en définissant « display : none ».

3. Principes d'implémentation de v-else et v-else-if
v-else et v-else-if sont des instructions supplémentaires de v-if. Elles peuvent être utilisées après v-if pour gérer plusieurs conditions. Le principe de mise en œuvre de

v-else et v-else-if est le suivant :

1. v-else ne prendra effet que lorsque la condition v-if ou v-else-if précédente est fausse.
2. v-else-if prendra effet lorsque la condition v-if précédente est fausse et que sa propre condition est vraie.

Exemple de code :

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

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

Dans l'exemple de code ci-dessus, selon la valeur du score, le contenu correspondant est affiché via v-if, v-else-if et v-else.

Pour résumer, v-if, v-show, v-else et v-else-if sont des instructions de rendu conditionnel couramment utilisées dans Vue. Elles sont essentiellement implémentées en contrôlant l'affichage et le masquage des éléments. Une compréhension approfondie de leurs principes de mise en œuvre nous aidera à mieux utiliser et optimiser la fonction de rendu conditionnel de 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!