在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>
綜上所述：
- 對于陣列，第一個引數是內容，第二個引數是索引；
- 對于物件，第一個引數是值，第二個引數是名稱，第三個引數是索引，
注意：在遍歷物件時，會按 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>
備注
丑奴兒·書博山道中壁
辛棄疾
少年不識愁滋味，愛上層樓，愛上層樓，為賦新詞強說愁，
而今識盡愁滋味，欲說還休，欲說還休，卻道天涼好個秋，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/156219.html
標籤：JavaScript
上一篇：react初始