Comment Uniapp implémente le rendu conditionnel pour contrôler l'affichage des pages

uniapp implémente comment utiliser le rendu conditionnel pour contrôler l'affichage de la page, ce qui nécessite des exemples de code spécifiques

Dans le développement d'uniapp, nous devons souvent décider d'afficher ou de masquer certains éléments de la page en fonction de différentes conditions, ce qui nécessite le utilisation des conditions Le rendu est réalisé. Le rendu conditionnel peut porter des jugements sur la base de conditions données et restituer sélectivement certains contenus sur la page en fonction des résultats du jugement.

Dans uniapp, il existe deux manières d'utiliser le rendu conditionnel : en utilisant l'instruction v-if et en utilisant l'instruction v-show. Les deux méthodes seront décrites ci-dessous, avec des exemples de code spécifiques.

Utilisez l'instruction v-if pour implémenter le rendu conditionnel :

L'instruction v-if est l'une des instructions courantes fournies par le framework vue, qui peut déterminer s'il faut restituer un élément en fonction du vrai ou du faux d'une expression donnée. .

Tout d'abord, définissez les éléments qui doivent être rendus conditionnellement dans la balise de modèle, puis utilisez la directive v-if pour spécifier les conditions de jugement. Si la condition est vraie, l'élément sera rendu ; si elle est fausse, l'élément sera supprimé.

Le code spécifique est le suivant :

<template>
  <view>
    <text v-if="showElement">我是需要渲染的元素</text>
    <text v-else>我是需要隐藏的元素</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showElement: true // 根据该值来决定元素的显示与隐藏
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un attribut showElement dont la valeur détermine l'affichage et le masquage des éléments nécessitant un rendu conditionnel. Si showElement est vrai, « Je suis l'élément qui doit être rendu » sera affiché ; si showElement est faux, « Je suis l'élément qui doit être masqué » sera affiché.

Utilisez l'instruction v-show pour implémenter le rendu conditionnel :

L'instruction v-show est également l'une des instructions courantes fournies par le framework vue. Elle peut déterminer s'il faut afficher un élément en fonction du vrai ou du faux d'un élément donné. expression.

Différent de l'instruction v-if, l'instruction v-show ne supprime pas réellement l'élément du DOM, mais contrôle son affichage et son masquage en modifiant l'attribut d'affichage de l'élément.

Le code spécifique est le suivant :

<template>
  <view>
    <text v-show="showElement">我是需要显示的元素</text>
    <text v-show="!showElement">我是需要隐藏的元素</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showElement: true // 根据该值来决定元素的显示与隐藏
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons également un attribut showElement. La valeur de cet attribut détermine l'affichage et le masquage des éléments qui doivent être rendus conditionnellement. Si showElement est vrai, "Je suis l'élément qui doit être affiché" sera affiché ; si showElement est faux, "Je suis l'élément qui doit être masqué" sera affiché. Il convient de noter que changer l'affichage et le masquage d'un élément via l'instruction v-show ne changera pas la position de l'élément dans le DOM.

Grâce aux deux méthodes ci-dessus, nous pouvons facilement contrôler l'affichage et le masquage des éléments de page en fonction des conditions dans uniapp. Choisir la méthode appropriée en fonction des besoins réels peut améliorer l’efficacité du développement et 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!