Une brève analyse des instructions de rendu de liste de Vue : v-for

Cet article vous présentera la commande de rendu de liste de Vue : v-for. J'espère qu'elle vous sera utile !

Rendu de liste de Vue

1.1.v-for

⭐⭐
Personnellement, je pense que c'est en fait une boucle for avec une syntaxe de base. L'utilisation est similaire, mais la forme l'est. différent. Si vous le comprenez, vous pouvez l'utiliser. (Partage vidéo d'apprentissage : tutoriel vidéo vue)

Comment utiliser ;

1 Parcourir un tableau

v-for="item in 数组"

v-for="(item, index) in 数组"

Exemple de parcours d'un tableau :

<div class="item" v-for="item in products">
    <h3 class="title">商品:{{item.name}}</h3>
    <span>价格:{{item.price}}</span>
    <p>秒杀：{{item.desc}}</p>
</div>

const app = Vue.createApp({
        data() {
          return {
            //2.数组 存放的是对象
            products: [
              { id: 11, name: "mac", price: 1000, desc: "99" },
            ],
          };
        },
      });

app.mount("#app");

2. objets , et prend en charge un, deux ou trois paramètres :

Un paramètre : « valeur dans l'objet » ;

• Deux paramètres : « (valeur, clé) dans l'objet »
• Trois paramètres : « (valeur, clé, index) ; ) dans l'objet »;
• v-for prend également en charge le parcours de nombres :

Chaque élément est un nombre

<!-- 2.遍历对象 -->
      <ul>
        <li v-for="(value,key,index) in info">
          {{value}} - {{key}} - {{index}}
        </li>
      </ul>
 
 const app = Vue.createApp({
        data() {
          return {
            info: { bame: "why", age: 18, height: 1.88 },
          };
        },
      });
app.mount("#app");

3. Traverse les chaînes

<li v-for="item in 100">{{item}}</li>

1.2.v-for et template ⭐⭐

Nous peut utiliser l'élément templ pour parcourir le rendu d'un élément de contenu contenant plusieurs éléments

Pourquoi ne pas utiliser div ici ?

Je n'y ai pas beaucoup réfléchi lorsque j'étudiais auparavant. J'ai découvert ce problème lorsque j'organisais mes notes

La raison

 :

S'il est enveloppé par div, le div le sera également. rendu

• Et s'il est enveloppé par template , le modèle n'est pas rendu, ce qui évite l'utilisation d'une balise div inutile par rapport à l'utilisation de div.

En fait, le rôle du modèle est un espace réservé au modèle, qui peut nous aider à envelopper des éléments pendant le processus de boucle, le modèle ne sera pas rendu sur la page.

div (si le div n'a aucune signification réelle, vous pouvez utiliser un modèle pour le remplacer)

• 0a0b09a86095b895314008cac4ff62a7
          45a2772a6b6107b401db3c9b82c049c2{{value}}54bdf357c58b8a65c66d7c19c8e4d114
          8e99a69fbe029cd4e2b854e244eab143{{key}}128dba7a3a77be0113eb0bea6ea0a5d0
          5a8028ccc7a7e27417bff9f05adf5932{{index}}72ac96585ae54b6ae11f849d2649d9e6
  16b28748ea4df4d9c2150843fecfba68

template

• <template v-for="(value,key,index) in infos">
          <span>{{value}}</span>
          <strong>{{key}}</strong>
          <i>{{index}}</i>
  </template>

1.3.v-pour la détection de mise à jour du tableau ⭐⭐

Vue encapsule les méthodes de modification du tableau écouté, elles déclencheront donc également des mises à jour de la vue

Les méthodes encapsulées incluent

 :

push() insérant des éléments après le tableau

• pop() Supprimer un élément à l'arrière du tableau
• shift() Supprimer un élément à l'avant du tableau
• unshift() Insérer un élément à l'avant du tableau
• splice() Couper, insérer et supprimer le tableau
• sort() Sort
• reverse() reverse
• L'utilisation de ces méthodes est en fait similaire dans js Quand vous y réfléchissez, recherchez-la à nouveau

méthode de remplacement du tableau

La méthode ci-dessus sera. modifier directement le tableau d'origine ;

• Mais certaines méthodes ne remplaceront pas le tableau d'origine, mais généreront un nouveau tableau, comme filter(), concat() et slice();

• //并不是完整写法！！！
  
  <li v-for="item in names">{{item}}</li>
  names: ["abc", "bac", "aaa", "cbb"],
  // 1.直接将数组修改为一个新的数组
  this.names = ["cc", "kk"];
  
  // 2.通过一些数组的方法，修改数组中的元素
  this.names.push("cc");
  this.names.pop();
  this.names.splice(2, 1, "cc");
  this.names.sort();
  this.names.reverse();

[Recommandation de didacticiel vidéo connexe :

Tutoriel d'introduction à vuejs

、Démarrer avec le front-end Web】

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!