Vue---條件語句和迴圈語句（二）
阿新 • • 發佈：2019-02-07
v-for 迭代陣列
我們用v-for 指令根據一組陣列的選項列表進行渲染。v-for 指令需要使用item
in items 形式的特殊語法，items 是源資料陣列並且 item 是陣列元素迭代的別名。案例1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試例項 - v-for 迭代陣列</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="site in sites"> {{ site.name }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: '足球' }, { name: '籃球' }, ] } }) </script> </body> </html>
----- ul 無序列表； ol 有序列表。 在
v-for 塊中，我們擁有對父作用域屬性的完全訪問許可權。v-for 還支援一個可選的第二個引數為當前項的索引。案例2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試例項 - v-for 迭代陣列</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(site,index) in sites"> {{ site.name }} -{{index}} </li> </ul> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: '足球' }, { name: '籃球' }, ] } }) </script> </body> </html>
v-for 迭代物件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試例項 - v-for 迭代物件</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '程式設計師', age:24, interest: '熬夜敲程式碼' } } }) </script> </body> </html>
也可以提供第二個的引數為鍵名：
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
第三個引數為索引：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>v-for 迭代整數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試例項 - v-for 迭代整數</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in 5">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>v-for 迭代陣列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試例項 - v-for 迭代陣列</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in [2,4,6]">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>key
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的track-by="$index" 。
這個預設的模式是高效的，但是隻適用於不依賴子元件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id。這個特殊的屬性相當於 Vue 1.x 的 track-by ，但它的工作方式類似於一個屬性，所以你需要用v-bind 來繫結動態值 (在這裡使用簡寫)：
<div v-for="item in items" :key="item.id">
<!-- 內容 -->
</div>v-for 時提供 key，除非遍歷輸出的
DOM 內容非常簡單，或者是刻意依賴預設行為以獲取效能上的提升。