Comment utiliser v-if, v-else-if, v-else pour obtenir plusieurs rendus conditionnels dans Vue

Vue est un framework JavaScript populaire principalement utilisé pour créer des applications Web interactives. Dans Vue, nous pouvons utiliser les directives v-if, v-else-if et v-else pour implémenter plusieurs rendus conditionnels.

La directive v-if est utilisée pour restituer les éléments DOM en fonction de conditions. L'élément ne sera rendu que si la condition est vraie. Les directives v-else-if et v-else sont utilisées pour utiliser plusieurs conditions dans la directive v-if.

Ci-dessous, nous présenterons en détail comment utiliser ces instructions pour implémenter plusieurs rendus conditionnels.

Utilisez la directive v-if

Pour utiliser la directive v-if, nous pouvons l'ajouter à l'élément DOM qui doit être jugé conditionnellement et le lier à une expression.

Par exemple, nous pouvons créer un composant Vue similaire au suivant :

<template>
  <div>
    <p v-if="showMessage">显示消息</p>
  </div>
</template>

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

Dans ce composant, nous utilisons la directive v-if pour déterminer conditionnellement s'il faut afficher un message. Si la valeur de la variable showMessage est vraie, alors cet élément sera restitué dans le DOM.

Si la valeur de la variable showMessage est fausse, alors cet élément ne sera pas rendu sur la page.

Utilisez les instructions v-else-if et v-else

Parfois, nous devons restituer des éléments DOM en fonction de plusieurs conditions, nous pouvons alors utiliser les instructions v-else-if et v-else.

Par exemple, nous pouvons créer un composant comme celui-ci :

<template>
  <div>
    <p v-if="size === 'small'">这是小尺寸</p>
    <p v-else-if="size === 'large'">这是大尺寸</p>
    <p v-else>这是默认尺寸</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 'small'
    };
  }
};
</script>

Dans cet exemple, nous décidons quel élément doit être affiché en fonction de la valeur de la variable size. Si size est égal à "small", seul le premier élément p sera rendu ; s'il est égal à "large", seul le deuxième élément p sera rendu ; sinon, seul le troisième élément p sera rendu ;

Résumé

Vue fournit des instructions pratiques v-if, v-else-if et v-else, nous permettant de restituer de manière flexible des éléments DOM en fonction de plusieurs conditions. Nous pouvons utiliser ces directives pour créer de puissantes applications interactives et les rendre conditionnellement.

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!