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)

v-for="item in 数组"

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

<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");

⭐⭐
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";

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");

<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?

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>

Copy after login

• template

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

Copy after login

1.3.v-for array update detection##⭐⭐

:

• 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

• 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();

  Copy after login
  [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!