淺析Vue的列表渲染指令：v-for

這篇文章帶大家一起了解下Vue的清單渲染指令：v-for，希望給大家有幫助！

Vue的清單渲染

1.1.v-for

⭐⭐
個人覺得其實就是基礎文法的for循環，使用上也差不多，只是形式不同罷了,理解會使用。 （學習影片分享：vue影片教學）

使用方法;

1、遍歷陣列

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

2、遍歷對象
⭐⭐
v-for也支援遍歷對象，並且支援有一二三個參數：

• 一個參數： 「value in object ”;
• 二參數： “(value, key) in object”;
• 三個參數： “(value, key, index) in object”;

v-for同時也支援數字的遍歷：
每一個item都是一個數字；

<!-- 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、遍歷字串

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

1.2 .v-for和template

⭐⭐
我們可以使用templ元素來循環渲染一段包含多個元素的內容

為什麼這裡不使用div呢？

我之前學的時候也沒有怎麼考慮這個，整理筆記的時候發現了這個問題

原因：

• #如果是div包裹的話，div也會被渲染出來
• 而使用template包裹的話，template並沒有被渲染，相較於使用div會節省一個沒有必要的div標籤的使用。

其實，template的作用就是模板佔位符，可以幫助我們包裹元素，在循環的過程總，template不會被渲染到頁面上。

• div(如果div沒有實際的意義，那麼可以使用template替換)

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-for 陣列更新偵測

⭐⭐

# Vue將被偵聽的陣列的變更方法進行了包裹，所以它們也會觸發視圖更新

被包裹過的方法包括：

• push() 陣列的後面插入元素
• pop() 從陣列後面刪除一個元素
• shift() 從陣列前面刪除一個元素
• # unshift() 從陣列前面插入一個元素
• splice() 陣列的剪貼、插入、刪除
• sort() 排序
• reverse() 反轉

這些方法的用法其實在js中都是差不多的，用到的時候想起來再查查

#取代陣列的方法

• 上面的方法會直接修改原來的陣列；
• 但是某些方法不會取代原來的數組，而是會產生新的數組，例如filter()、concat() 和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();

【相關影片教學推薦：vuejs入門教學、web前端入門】

以上是淺析Vue的列表渲染指令：v-for的詳細內容。更多資訊請關注PHP中文網其他相關文章！