Vue v-for使用详解
生活随笔
收集整理的這篇文章主要介紹了
Vue v-for使用详解
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Vue指令之v-for和key屬性
1.迭代數(shù)組
<ul><li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li> </ul>2.迭代對(duì)象中的屬性
<!-- 循環(huán)遍歷對(duì)象身上的屬性 --><div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>3.迭代數(shù)字
<p v-for="i in 10">這是第 {{i}} 個(gè)P標(biāo)簽</p>4.循環(huán)普通數(shù)組
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><!-- <p>{{list[0]}}</p><p>{{list[1]}}</p><p>{{list[2]}}</p><p>{{list[3]}}</p><p>{{list[4]}}</p> --><p v-for="(item, i) in list">索引值：{{i}} --- 每一項(xiàng)：{{item}}</p></div><script>// 創(chuàng)建 Vue 實(shí)例，得到 ViewModelvar vm = new Vue({el: '#app',data: {list: [1, 2, 3, 4, 5, 6]},methods: {}});</script> </body></html>5.循環(huán)對(duì)象數(shù)組
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p></div><script>// 創(chuàng)建 Vue 實(shí)例，得到 ViewModelvar vm = new Vue({el: '#app',data: {list: [{ id: 1, name: 'zs1' },{ id: 2, name: 'zs2' },{ id: 3, name: 'zs3' },{ id: 4, name: 'zs4' }]},methods: {}});</script> </body></html>6.循環(huán)對(duì)象
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><!-- 注意：在遍歷對(duì)象身上的鍵值對(duì)的時(shí)候， 除了 有 val key ,在第三個(gè)位置還有 一個(gè) 索引 --><p v-for="(val, key, i) in user">值是： {{ val }} --- 鍵是： {{key}} -- 索引： {{i}}</p></div><script>// 創(chuàng)建 Vue 實(shí)例，得到 ViewModelvar vm = new Vue({el: '#app',data: {user: {id: 1,name: '托尼·顆',gender: '男'}},methods: {}});</script> </body></html>7.迭代數(shù)字
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><!-- in 后面我們放過 普通數(shù)組，對(duì)象數(shù)組，對(duì)象， 還可以放數(shù)字 --><!-- 注意：如果使用 v-for 迭代數(shù)字的話，前面的 count 值從 1 開始 --><p v-for="count in 10">這是第 {{ count }} 次循環(huán)</p></div><script>// 創(chuàng)建 Vue 實(shí)例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});</script> </body></html>2.2.0+ 的版本里，當(dāng)在組件中使用 v-for 時(shí)，key 現(xiàn)在是必須的。
當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)，它默認(rèn)用 “就地復(fù)用” 策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue將不是移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。
為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性。
完整代碼：
如果不使用key的話
添加新元素進(jìn)去之后，勾選的對(duì)應(yīng)的是索引號(hào)，就會(huì)出現(xiàn)bug
但是用key的話，就不會(huì)有這樣的bug了，勾選的一樣是荀子
總結(jié)
以上是生活随笔為你收集整理的Vue v-for使用详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鲁滨逊漂流记读后感100字
- 下一篇： 详解使用VueJS开发项目中的兼容问题