一起學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
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類