91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2022-10-25 09:04:25 來源:億速云 閱讀:159 作者:iii 欄目:編程語言

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

Vue的列表渲染

1.1.v-for

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

使用方法;

1、遍歷數組

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

對一個數組進行遍歷實例:

<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.數組 存放的是對象
            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替換)

<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 數組更新檢測

??

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

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

铜梁县| 湘西| 吕梁市| 宁蒗| 上蔡县| 中山市| 鹿邑县| 栖霞市| 云梦县| 伽师县| 金川县| 上蔡县| 法库县| 三台县| 灵璧县| 云安县| 进贤县| 翁源县| 宝鸡市| 葵青区| 于田县| 太保市| 乌鲁木齐县| 景宁| 江达县| 万盛区| 潼南县| 呼玛县| 中阳县| 云龙县| 京山县| 阿巴嘎旗| 广丰县| 两当县| 雷州市| 桐乡市| 文化| 雅安市| 伊通| 高安市| 雷山县|