一起學Vue之列表渲染

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

在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>

備註

醜奴兒·書博山道中壁

辛棄疾

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

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


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

更多相關文章
  • 前提要述:參考書籍《MySQL必知必會》 6.1 更新數據 為了更新(修改)表中的數據,可使用UPDATE語句。可採用兩種方式使用UPDATE: 更新表中特定的行; 更新表中所有的行。 UPDATE語法的結構由3部分組成: 要更新的表; 列名和它們的新值; 確定要更新行的過濾條件(WHERE關鍵字) ...
  • 【Mysqli面向對象方式操作資料庫】 添加、修改、刪除數據 $mysqli = new mysqli('localhost','root','123456','test'); $mysqli->query('set names utf8'); //添加數據 $result = $mysqli->q ...
  • 場景 NoSQL,泛指非關係型的資料庫,NoSQL即Not-Only SQL,它可以作為關係型資料庫的良好補充。隨著互聯網web2.0網站的興起,非關係型的資料庫現在成了一個極其熱門的新領域,非關係資料庫產品的發展非常迅速 Redis是用C語言開發的一個開源的高性能鍵值對(key-value)資料庫 ...
  • 個人博客 "http://www.milovetingting.cn" Builder模式 模式介紹 Builder模式是一步一步創建一個複雜對象的創建型模式,它允許用戶在不知道內部構建細節的情況下,可以更精細地控制對象的構建流程。該模式是為了將構建複雜對象的過程和它的部件解耦,使得構建過程和部件的 ...
  • 場景 在通過getDrawable方法獲取照片資源時提示: Call requires API level 21(current min is 15) 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號霸道的程式猿 獲取編程相關電子書、教程推 ...
  • 本篇文章簡單說明以下四個問題:1.什麼是Tasker插件,2.什麼是Tasker第三方應用,3.如何使用他們,4.常用的Tasker插件和第三方應用有哪些(本篇重點)。 ...
  • 個人博客 "http://www.milovetingting.cn" Android埋點方案的簡單實現 AOP之AspectJ AOP的定義 AOP為Aspect Oriented Programming的縮寫,意為:面向切麵編程,通過預編譯方式和運行期間動態代理實現程式功能的統一維護的一種技術。 ...
  • 一、a標簽的偽類選擇器 1.通過觀察可以發現a標簽存在一定狀態 (1)預設狀態,從未被訪問過 (2)被訪問過的狀態 (3)滑鼠長按的狀態 (4)滑鼠懸停在a標簽上的演示 2.什麼是a標簽的偽類選擇器? a標簽的偽類選擇器是專門用來修改a標簽不同狀態的樣式。 a:link{} 用來修改預設的樣式 a: ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...