A brief analysis of Vue's list rendering instructions: v-for

This article will take you through Vue’s list rendering command: v-for. I hope it will be helpful to you!

Vue’s list rendering

##1.1.v-for

⭐⭐

Personally, I feel that it is actually a for loop with basic syntax. The usage is similar, but the form is different. If you understand it, you will be able to use it. (Learning video sharing:
vue video tutorial)

Usage method;

1. Traverse the array

v-for="item in 数组"

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

Example of traversing an array:

<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. Traversing objects

⭐⭐
v-for also supports traversing objects, and supports one, two or three parameters:

One parameter: "value in object ";
Two parameters: "(value, key) in object";
Three parameters: "(value, key, index) in object";

v-for also supports digital traversal:

Each item is a number;

<!-- 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. Traversing strings

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

1.2 .v-for and template

⭐⭐

We can use the template element to loop through rendering a piece of content containing multiple elements

Why not here What about using div?

I didn’t think much about this when I was studying before. I discovered this problem when I was sorting out my notes

Reason:

If it is wrapped by div, the div will also be rendered.
But if it is wrapped by template, the template will not be rendered. Compared with using div, it will save the use of an unnecessary div tag.

In fact, the function of template is a template placeholder, which can help us wrap elements. During the loop process, template will not be rendered to the page.

• div (if div has no actual meaning, you can use template to replace it)

<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-for array update detection##⭐⭐

Vue wraps the change methods of the listened array, so they will also trigger view updates

The wrapped methods include

:

push() Insert an element from the back of the array

• pop() Delete an element from the back of the array
• shift() Delete an element from the front of the array
• unshift() Insert an element from the front of the array
• splice() Cut, insert, and delete the array
• sort() Sort
• reverse() Reverse
The usage of these methods is actually similar in js. When you think of it, look it up again

Methods to replace arrays

The above method will directly modify the original array;

• However, some methods will not replace the original array, but will generate a new array, such as filter(), concat() and 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();

  [Recommended related video tutorials: vuejs entry tutorial

  , web front-end entry]

  The above is the detailed content of A brief analysis of Vue's list rendering instructions: v-for. For more information, please follow other related articles on the PHP Chinese website!