Vue的列表渲染指令v-for怎么使用

這篇文章主要介紹“Vue的列表渲染指令v-for怎么使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue的列表渲染指令v-for怎么使用”文章能幫助大家解決問題。

Vue的列表渲染

1.1.v-for

??
個人感覺其實就是基礎(chǔ)語法的for循環(huán)，使用上也差不多，只是形式不同罷了,理解會使用。

使用方法;

1、遍歷數(shù)組

v-for="item in 數(shù)組"

v-for="(item, index) in 數(shù)組"

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

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

app.mount("#app");

2、遍歷對象
??
v-for也支持遍歷對象，并且支持有一二三個參數(shù)：

• 一個參數(shù)： “value in object”;

• 二個參數(shù)： “(value, key) in object”;

• 三個參數(shù)： “(value, key, index) in object”;

v-for同時也支持數(shù)字的遍歷：
每一個item都是一個數(shù)字；

<!-- 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元素來循環(huán)渲染一段包含多個元素的內(nèi)容

為什么這里不使用div呢？

我之前學(xué)的時候也沒有怎么考慮這個，整理筆記的時候發(fā)現(xiàn)了這個問題

原因：

• 如果是div包裹的話，div也會被渲染出來

• 而使用template包裹的話，template并沒有被渲染，相較于使用div會節(jié)省一個沒有必要的div標簽的使用。

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

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

<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 數(shù)組更新檢測

??

Vue將被偵聽的數(shù)組的變更方法進行了包裹，所以它們也將會觸發(fā)視圖更新

被包裹過的方法包括：

• push() 數(shù)組的后面插入元素

• pop() 從數(shù)組后面刪除一個元素

• shift() 從數(shù)組前面刪除一個元素

• unshift() 從數(shù)組前面插入一個元素

• splice() 數(shù)組的剪貼、插入、刪除

• sort() 排序

• reverse() 反轉(zhuǎn)

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

替換數(shù)組的方法

• 上面的方法會直接修改原來的數(shù)組；

• 但是某些方法不會替換原來的數(shù)組，而是會生成新的數(shù)組，比如 filter()、concat() 和 slice()；

//并不是完整寫法！??！

<li v-for="item in names">{{item}}</li>
names: ["abc", "bac", "aaa", "cbb"],
// 1.直接將數(shù)組修改為一個新的數(shù)組
this.names = ["cc", "kk"];

// 2.通過一些數(shù)組的方法，修改數(shù)組中的元素
this.names.push("cc");
this.names.pop();
this.names.splice(2, 1, "cc");
this.names.sort();
this.names.reverse();

關(guān)于“Vue的列表渲染指令v-for怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。