Comment utiliser la directive conditionnelle v-if dans la documentation Vue

Vue est un framework JavaScript open source permettant de créer des interfaces utilisateur spéciales. La directive conditionnelle v-if dans la documentation Vue est un moyen de contrôler si un élément Vue est rendu. À l'aide de la directive v-if, vous pouvez contrôler s'il faut restituer les éléments en fonction des données de la page.

La directive v-if peut accepter une expression booléenne. Si le résultat de l'expression est vrai, Vue rendra l'élément sinon, Vue ne rendra pas l'élément sur la page. Voici la syntaxe de l'instruction v-if :

<element v-if="expression"></element>

expression est une expression JavaScript, qui peut être une variable, une fonction ou un calcul.

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

<template>
  <div>
    <p v-if="show">这里是文本内容</p>
    <button @click="toggleShow">点击切换文本内容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
};
</script>

Dans l'exemple ci-dessus, lorsque la valeur de la variable show est vraie, Vue restituera l'élément p et afficher "ici" est le contenu du texte" ; lorsque la valeur de la variable show est fausse, Vue ne restituera pas l'élément p. La méthode toggleShow peut modifier la valeur de la variable show en cliquant sur le bouton, commutant ainsi l'affichage et le masquage du contenu du texte.

En plus de l'instruction v-if, Vue fournit également l'instruction v-show. L'utilisation de la directive v-show est similaire à la directive v-if, mais la directive v-show ne supprime pas les éléments du DOM, mais utilise CSS pour contrôler l'affichage et le masquage des éléments. Par conséquent, l’instruction v-show est plus efficace que l’instruction v-if.

Si vous devez restituer un groupe d'éléments, vous pouvez utiliser la directive v-for en combinaison avec la directive v-if. Voici la syntaxe de la directive v-for combinée avec la directive v-if :

<element v-for="item in items" v-if="expression"></element>

expression est une expression JavaScript qui contrôle s'il faut restituer l'élément. Ce qui suit est un exemple d'utilisation conjointe des directives v-for et v-if :

<template>
  <ul>
    <li v-for="(item, index) in items"
        v-if="item.visible"
        :key="index">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '第一项', visible: true },
        { text: '第二项', visible: false },
        { text: '第三项', visible: true }
      ]
    };
  }
};
</script>

Dans l'exemple ci-dessus, Vue restituera les éléments avec une valeur d'attribut visible true dans le tableau items, qui c'est-à-dire le premier élément et les trois éléments.

L'utilisation de la directive v-if peut contrôler de manière plus flexible l'affichage et le masquage des éléments Vue. Cependant, il convient de noter que dans certains cas, l'instruction v-if peut entraîner des problèmes de performances, le choix doit donc être fait au cas par cas.

En bref, l'instruction conditionnelle v-if est une instruction très couramment utilisée dans le framework Vue. Maîtriser son utilisation peut permettre aux développeurs de mieux contrôler le rendu des pages et d'améliorer l'expérience utilisateur.

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!