一起學Vue之列表渲染

来源:https://www.cnblogs.com/hsiang/archive/2020/01/14/12194040.html
-Advertisement-
Play Games

在Vue開發中，列表數據綁定非常簡單易用，本文主要通過一些簡單的小例子，講述v-for的使用方法，僅供學習分享使用，如有不足之處，還請指正。 ...


在Vue開發中，列表數據綁定非常簡單易用，本文主要通過一些簡單的小例子，講述v-for的使用方法，僅供學習分享使用，如有不足之處，還請指正。

用 v-for 把一個數組對應為一組元素

我們可以用 v-for 指令基於一個數組來渲染一個列表。 v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。如下所示：

1 <ul>
2     <li v-for="fruit in fruits">
3         {{ fruit.name }}
4     </li>
5 </ul>

 在 v-for 塊中，我們可以訪問所有父作用域的屬性。v-for 還支持一個可選的第二個參數，即當前項的索引。如下所示：

1 <ul>
2     <li v-for="(fruit, index) in fruits">
3         {{ msg }} - {{ index }} - {{ fruit.name }}
4     </li>
5 </ul>

你也可以用 of 替代 in 作為分隔符，因為它更接近 JavaScript 迭代器的語法，如下所示：

1 <ul id="example-3">
2     <li v-for="fruit of fruits">
3         {{ fruit.name }}
4     </li>
5 </ul>

其中fruits是js中定義的一個數組，如下所示：

 1 <script type="text/javascript">
 2     var app = new Vue({
 3         el: '#app',
 4         data: {
 5             msg: 'hello world!!!',
 6             fruits: [
 7                 {id:0, name: 'Apple' },
 8                 {id:1, name: 'Pear' },
 9                 {id:2, name: 'Orange'},
10                 {id:3, name:'Banana'}
11             ]
12         }
13     });
14 </script>

在 v-for 里使用對象

v-for 除了可以遍曆數組，也可以用 v-for 來遍歷一個對象的屬性，如下所示：

1 <ul>
2     <li v-for="v in book">
3         {{ v }}
4     </li>
5 </ul>

也可以提供第二個的參數為 property 名稱 (也就是鍵名)：如下所示：v,n分別表示：值和名稱

1 <ul>
2     <li v-for="(v,n) in book">
3         {{n}}--{{ v }}
4     </li>
5 </ul>

還可以用第三個參數作為索引：,i表示當前索引，如下所示：

1 <ul>
2     <li v-for="(v,n,i) in book">
3         {{n}}--{{ v }}---{{i}}
4     </li>
5 </ul>

綜上所述：

  1. 對於數組，第一個參數是內容，第二個參數是索引；
  2. 對於對象，第一個參數是值，第二個參數是名稱，第三個參數是索引。

註意：在遍歷對象時，會按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下都一致。

其中book是一個對象，如下所示：

 1 <script type="text/javascript">
 2     var app = new Vue({
 3         el: '#app',
 4         data: {
 5             msg: 'hello world!!!',
 6             book: {
 7                 title: 'How to do lists in Vue',
 8                 author: 'Jane Doe',
 9                 publishedAt: '2016-04-10'
10         }
11     });
12 </script>

維護狀態

當 Vue 正在更新使用 v-for 渲染的元素列表時，它預設使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每個元素，並且確保它們在每個索引位置正確渲染。這個預設的模式是高效的，但是只適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性，如下所示：

1 <div v-for="(f,i) in fruits" v-bind:key="f.id">
2     <!-- 內容 -->
3     {{f.name}}-----{{i}}
4 </div>

建議儘可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴預設行為以獲取性能上的提升。因為它是 Vue 識別節點的一個通用機制，key 並不僅與 v-for 特別關聯。不要使用對象或數組之類的非基本類型值作為 v-for 的 key，請用字元串或數值類型的值。

數組更新檢測

Vue 將被偵聽的數組的變異方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

你可以打開控制台，然後對前面例子的 items 數組嘗試調用變異方法。如下所示：

替換數組

變異方法，顧名思義，會改變調用了這些方法的原始數組。相比之下，也有非變異 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它們不會改變原始數組，而總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組：

1 app.items = app.items.filter(function (item) {
2   return item.message.match(/Foo/)
3 })

你可能認為這將導致 Vue 丟棄現有 DOM 並重新渲染整個列表。幸運的是，事實並非如此。Vue 為了使得 DOM 元素得到最大範圍的重用而實現了一些智能的啟髮式方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

註意：由於 JavaScript 的限制，Vue 不能檢測以下數組的變動：

1.當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
2.當你修改數組的長度時，例如：vm.items.length = newLength

對象變更檢測註意事項

由於 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除，如下所示：

1 vm.items[1] = 'x' // 不是響應性的
2 vm.items.length = 2 // 不是響應性的

為瞭解決第一類問題，以下兩種方式都可以實現：

1 // Vue.set
2 Vue.set(vm.items, indexOfItem, newValue)
3 // Array.prototype.splice
4 vm.items.splice(indexOfItem, 1, newValue)
5 //你也可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名：
6 vm.$set(vm.items, indexOfItem, newValue)
 1 // `vm.a` 現在是響應式的
 2 vm.b = 2
 3 // `vm.b` 不是響應式的
 4 //對於已經創建的實例，Vue 不允許動態添加根級別的響應式屬性。
 5 //但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式屬性。例如，對於：
 6 //你可以添加一個新的 age 屬性到嵌套的 userProfile 對象：
 7 //Vue.set(vm.userProfile, 'age', 27)
 8 //你還可以使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：
 9 //vm.$set(vm.userProfile, 'age', 27)
10 //有時你可能需要為已有對象賦值多個新屬性，比如使用 Object.assign() 或 _.extend()。
11 //在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣：
12 Object.assign(vm.userProfile, {
13     age: 27,
14      favoriteColor: 'Vue Green'
15 });
16 //你應該這樣做：
17 vm.userProfile = Object.assign({}, vm.userProfile, {
18     age: 27,
19     favoriteColor: 'Vue Green'
20 });
View Code

為瞭解決第二類問題，你可以使用 splice：

1 vm.items.splice(newLength)

顯示過濾/排序後的結果

有時，我們想要顯示一個數組經過過濾或排序後的版本，而不實際改變或重置原始數據。在這種情況下，可以創建一個計算屬性，來返回過濾或排序後的數組。

1 <ul>
2     <li v-for="n in evenNumbers">{{ n }}</li>
3 </ul>

在計算屬性不適用的情況下 (例如，在嵌套 v-for 迴圈中) 你可以使用一個方法：

1  <ul>
2     <li v-for="n in even(numbers)">{{ n }}</li>
3 </ul>

其中，evenNumbers為計算屬性，even為一個函數，如下所示：

 1 <script type="text/javascript">
 2     var app = new Vue({
 3         el: '#app',
 4         data: {
 5             msg: 'hello world!!!',
 6             numbers: [ 1, 2, 3, 4, 5 ],        
 7         },
 8         methods: {    
 9             even: function (numbers) {
10                 return numbers.filter(function (number) {
11                     return number % 2 === 0;
12                 })
13             }
14         },
15         computed: {
16             evenNumbers: function () {
17                 return this.numbers.filter(function (number) {
18                     return number % 2 === 0;
19                 })
20             }
21         }
22 });
23 </script>
24

在 v-for 里使用值範圍

v-for 也可以接受整數。在這種情況下，它會把模板重覆對應次數。

1 <div>
2     <span v-for="n in 10">{{ n }} </span>
3 </div>

在 <template> 上使用 v-for

類似於 v-if，你也可以利用帶有 v-for 的 <template> 來迴圈渲染一段包含多個元素的內容。比如：

1 <ul>
2     <template v-for="f in fruits">
3         <li>{{ f.name }}</li>
4         <li class="divider" role="presentation"></li>
5     </template>
6 </ul>

備註

醜奴兒·書博山道中壁

辛棄疾

少年不識愁滋味，愛上層樓。愛上層樓，為賦新詞強說愁。

而今識盡愁滋味，欲說還休。欲說還休，卻道天涼好個秋。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL快速回顧：更新和刪除操作
    前提要述：參考書籍《MySQL必知必會》 6.1 更新數據 為了更新（修改）表中的數據，可使用UPDATE語句。可採用兩種方式使用UPDATE： 更新表中特定的行； 更新表中所有的行。 UPDATE語法的結構由3部分組成： 要更新的表； 列名和它們的新值； 確定要更新行的過濾條件（WHERE關鍵字） ...
  • PHP操作mysql（mysqli + PDO）
    【Mysqli面向對象方式操作資料庫】 添加、修改、刪除數據 $mysqli = new mysqli('localhost','root','123456','test'); $mysqli->query('set names utf8'); //添加數據 $result = $mysqli->q ...
  • Centos中Redis的下載編譯與安裝(超詳細)
    場景 NoSQL，泛指非關係型的資料庫，NoSQL即Not-Only SQL，它可以作為關係型資料庫的良好補充。隨著互聯網web2.0網站的興起，非關係型的資料庫現在成了一個極其熱門的新領域，非關係資料庫產品的發展非常迅速 Redis是用C語言開發的一個開源的高性能鍵值對（key-value）資料庫 ...
  • Builder模式
    個人博客 "http://www.milovetingting.cn" Builder模式 模式介紹 Builder模式是一步一步創建一個複雜對象的創建型模式，它允許用戶在不知道內部構建細節的情況下，可以更精細地控制對象的構建流程。該模式是為了將構建複雜對象的過程和它的部件解耦，使得構建過程和部件的 ...
  • Android中使用getDrawable時提示:Call requires API level 21(current min is 15)
    場景 在通過getDrawable方法獲取照片資源時提示： Call requires API level 21(current min is 15) 註： 博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號霸道的程式猿 獲取編程相關電子書、教程推 ...
  • Tasker如何使用Tasker插件以及Tasker第三方應用
    本篇文章簡單說明以下四個問題：1.什麼是Tasker插件，2.什麼是Tasker第三方應用，3.如何使用他們，4.常用的Tasker插件和第三方應用有哪些（本篇重點）。 ...
  • Android埋點方案的簡單實現-AOP之AspectJ
    個人博客 "http://www.milovetingting.cn" Android埋點方案的簡單實現 AOP之AspectJ AOP的定義 AOP為Aspect Oriented Programming的縮寫，意為:面向切麵編程，通過預編譯方式和運行期間動態代理實現程式功能的統一維護的一種技術。 ...
  • HTML連載63-a標簽的偽類選擇器
    一、a標簽的偽類選擇器 1.通過觀察可以發現a標簽存在一定狀態 （1）預設狀態，從未被訪問過 （2）被訪問過的狀態 （3）滑鼠長按的狀態 （4）滑鼠懸停在a標簽上的演示 2.什麼是a標簽的偽類選擇器？ a標簽的偽類選擇器是專門用來修改a標簽不同狀態的樣式。 a:link{} 用來修改預設的樣式 a: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類