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)

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

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!