Analyse d'exemples de fonctions de rendu conditionnel dans les documents Vue

Vue est un framework JavaScript très populaire. Il fournit des outils et des fonctions pratiques pour les développeurs, permettant aux développeurs de créer plus facilement des applications Web complexes. Parmi elles, la fonction de rendu conditionnel est une fonction très utile dans Vue, qui peut aider les développeurs à contrôler et à restituer dynamiquement les éléments sur la page. Dans cet article, nous analyserons et démontrerons la fonction de rendu conditionnel dans le document Vue.

1. Introduction à la fonction de rendu conditionnel de Vue

Vous pouvez utiliser les instructions v-if et v-show dans Vue pour implémenter le rendu conditionnel. Ces instructions nous permettent de contrôler si certains éléments doivent être rendus sur la page en fonction de conditions.

L'instruction v-if détermine si un élément doit être rendu en fonction de la valeur de l'expression. Si la valeur de l'expression est vraie, l'élément sera rendu sinon, l'élément ne sera pas rendu ; être rendu. Par exemple :

<div v-if="shown">
  这是一个需要被渲染出来的div元素
</div>

Dans l'exemple ci-dessus, l'élément div sera rendu sur la page uniquement lorsque la valeur de l'attribut affiché de l'instance Vue est vraie.

La directive v-show peut également implémenter le rendu conditionnel des éléments, mais son implémentation est un peu différente de v-if. L'instruction v-show modifie dynamiquement l'attribut d'affichage de l'élément en fonction de la valeur de l'expression. Si la valeur de l'expression est vraie, l'attribut d'affichage de l'élément est défini sur block, afin que l'élément soit affiché sur la page. ; sinon, l'attribut display de l'élément est défini sur block. La définition de l'attribut display sur none entraîne le masquage de l'élément sur la page. Par exemple :

<div v-show="shown">
  这是一个需要被渲染出来的div元素
</div>

Dans l'exemple ci-dessus, tant que la valeur de l'attribut affiché de l'instance Vue est vraie, l'élément div sera affiché, sinon il sera masqué.

2. La différence entre v-if et v-show

Bien que v-if et v-show puissent tous deux réaliser un rendu conditionnel des éléments, ils ont des méthodes d'implémentation différentes. Il existe des différences, principalement dans les aspects suivants :

1. Surcharge de rendu

L'instruction v-if sera restituée à chaque fois. Évalue le valeur d'une expression conditionnelle et ajoute ou supprime des éléments en fonction de la valeur de l'expression. Par conséquent, lorsque la valeur de l'expression conditionnelle est complexe ou qu'il y a de nombreux éléments, la surcharge de rendu de v-if sera relativement importante.

La commande v-show masque ou affiche uniquement les éléments en modifiant dynamiquement l'attribut d'affichage de l'élément. Il n'est pas nécessaire de recréer ou de supprimer l'élément, la surcharge de rendu est donc relativement faible. Cependant, lors du rendu initial de l'élément, l'instruction v-show doit d'abord déterminer la valeur de l'expression conditionnelle et définir l'attribut d'affichage de l'élément en fonction de cette valeur, de sorte que la vitesse de rendu peut être plus lente que v-if.

2. Surcharge de rendu initial

La directive v-if ne sera pas rendue si l'expression conditionnelle est initialement fausse. Le rendu ne démarrera que lorsque la valeur de l'expression conditionnelle deviendra vraie. Par conséquent, la surcharge de rendu initiale de v-if sera inférieure à celle de v-show.

La commande v-show définira dynamiquement l'attribut d'affichage de l'élément en fonction de la valeur de l'expression conditionnelle lors du rendu initial, déterminant ainsi si l'élément est affiché. Par conséquent, la surcharge de rendu initiale de v-show sera supérieure à celle de v-if.

3. Performances de rendu

L'instruction v-if réévaluera et recréera ou supprimera lorsque la valeur de l'expression conditionnelle change l'élément correspondant. . Lorsque seul un petit nombre d'éléments doivent être rendus dynamiquement, les performances de v-if seront légèrement meilleures que celles de v-show.

La commande v-show contrôle uniquement l'affichage et le masquage des éléments en modifiant dynamiquement l'attribut d'affichage de l'élément. Il n'est pas nécessaire de recréer ou de supprimer l'élément. Par conséquent, lorsqu'il est nécessaire de changer fréquemment d'affichage et de masquage d'éléments, les performances de v-show seront meilleures que celles de v-if.

3. Sélection des scénarios d'utilisation de v-if et v-show

Sur la base des différences ci-dessus, nous pouvons choisir v-if et v-show en fonction des besoins réels.

Lorsque vous devez fréquemment changer l'affichage et le masquage d'éléments, vous pouvez choisir d'utiliser la commande v-show. Par exemple : utilisé pour afficher et masquer certains panneaux de commande ou boîtes de dialogue, changer de menu, etc.

Lorsque vous devez déterminer si certains éléments doivent être rendus en fonction d'une logique complexe, ou lorsque vous devez créer ou supprimer dynamiquement des éléments, vous pouvez utiliser l'instruction v-if. Par exemple : rendu de certains éléments de la page en fonction du statut de connexion de l'utilisateur, rendu de certains boutons d'opération dans la page en fonction des autorisations de l'utilisateur, etc.

4. Exemple d'analyse

Montrons l'utilisation de v-if et v-show à partir d'un exemple.

Supposons que nous devions afficher une liste de produits sur la page. La liste contient des informations telles que le nom du produit, le prix, l'inventaire et le bouton d'achat. Dans le même temps, la liste doit également fournir une fonction de filtrage afin que les utilisateurs puissent afficher différentes informations sur les produits en fonction de différentes conditions. L'implémentation spécifique est la suivante :

1. Définir les données de la liste de produits

Nous devons d'abord définir un tableau contenant des informations sur le produit. Ici, nous supposons temporairement. que le tableau contient déjà. Contient des informations sur 10 produits. Le format du tableau est le suivant :

goodsList: [
  {
    name: "商品A",
    price: 100,
    stock: 50
  },
  {
    name: "商品B",
    price: 200,
    stock: 80
  },
  ...
]

2. Définir les conditions de filtre et filtrer les données de résultat

Afin d'implémenter la fonction de filtrage, nous Vous devez définir un formulaire. Le formulaire contient des zones de saisie pour les conditions de filtrage. Grâce à ces zones de saisie, les utilisateurs peuvent saisir différentes conditions de filtre pour afficher différentes informations sur le produit.

En parallèle, nous devons également définir une variable pour stocker les résultats filtrés, afin de filtrer les produits qui ne répondent pas aux conditions de filtrage. Les définitions des conditions de filtrage et des résultats du filtre sont les suivantes :

filterForm: {
  name: "",
  minPrice: "",
  maxPrice: ""
},
filteredGoodsList: []

3. 实现筛选逻辑

为了实现筛选功能，我们需要在Vue实例中定义一个方法，该方法会在每次需要筛选时被调用。该方法会根据用户输入的筛选条件，从商品列表中筛选出符合条件的商品，并将结果存储到filteredGoodsList中。

具体实现代码如下：

methods: {
  filterGoodsList() {
    let filterName = this.filterForm.name.toLowerCase()
    let filterMinPrice = this.filterForm.minPrice ? parseInt(this.filterForm.minPrice) : Number.MIN_SAFE_INTEGER
    let filterMaxPrice = this.filterForm.maxPrice ? parseInt(this.filterForm.maxPrice) : Number.MAX_SAFE_INTEGER
    this.filteredGoodsList = this.goodsList.filter((item) => {
      let itemName = item.name.toLowerCase()
      return itemName.indexOf(filterName) !== -1 && item.price >= filterMinPrice && item.price <= filterMaxPrice
    })
  }
}

在这个方法中，我们首先将用户输入的筛选条件分别提取出来，并将maxPrice和minPrice转换为数字类型。然后，我们使用JavaScript数组的filter方法，从商品列表中筛选出符合条件的商品。可以看到，我们使用了itemName.indexOf(filterName) !== -1这种方式，即通过JavaScript中字符串的indexOf方法来检查itemName是否包含了filterName这个子串。如果包含，则返回true，表示该商品符合筛选条件；否则返回false，表示该商品不符合筛选条件。最后，我们将筛选结果存储到filteredGoodsList中。

4. 实现列表渲染

我们可以通过v-for指令来遍历filteredGoodsList数组，并将每个数组元素渲染成一个商品信息块。具体实现代码如下：

<div v-for="(item, index) in filteredGoodsList" :key="index" class="goods-item">
  <div class="goods-name">{{ item.name }}</div>
  <div class="goods-price">{{ item.price }}</div>
  <div class="goods-stock">{{ item.stock }}</div>
  <div class="goods-buy-btn" v-show="item.stock > 0">购买</div>
  <div class="goods-sold-out" v-if="item.stock == 0">已售罄</div>
</div>

在这个代码中，我们将v-for指令绑定到filteredGoodsList数组上，这样就可以遍历这个数组中的所有元素。我们使用: key="index"来为每个元素设置一个唯一的key值，以便Vue能够高效地对列表进行更新。

在每个商品信息块中，我们使用v-show和v-if指令来根据不同的商品库存信息来动态展示不同的元素。如果该商品库存大于0，则会显示购买按钮；否则，会显示“已售罄”的文字提示。

5. 实现筛选表单和筛选按钮

最后，我们需要在页面上添加一个筛选表单，让用户可以输入不同的筛选条件来观察不同的商品信息。表单的代码如下：

<div class="filter-form">
  <label for="filter-name">商品名称：</label>
  <input type="text" id="filter-name" v-model="filterForm.name">
  <label for="filter-min-price">价格区间：</label>
  <input type="text" id="filter-min-price" placeholder="最小价格" v-model="filterForm.minPrice">
  -
  <input type="text" id="filter-max-price" placeholder="最大价格" v-model="filterForm.maxPrice">
  <button @click="filterGoodsList">筛选</button>
</div>

在这个代码中，我们使用了v-model指令将表单元素和Vue实例中的filterForm对象绑定在一起，从而实现了双向数据绑定。我们还添加了一个筛选按钮，在用户点击按钮时会触发filterGoodsList方法，从而重新进行商品列表的筛选和渲染。

六、总结

通过以上分析和实例演示，我们了解了Vue文档中的条件渲染函数的基本知识和使用方法，以及v-if和v-show指令在渲染开销、初始化渲染开销和渲染性能等方面的不同表现。最后，我们还运用条件渲染函数的知识，实现了一个商品列表及其筛选功能的实例。相信这些内容能够对您学习和使用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!