Vue指令之 v-for
key
v-for
key
- 疊代數組
<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
</ul> 複制
- 疊代對象中的屬性
<!-- 循環周遊對象身上的屬性 -->
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div> 複制
- 疊代數字
<p v-for="i in 10">這是第 {{i}} 個P标簽</p> 複制
2.2.0+ 的版本裡，當在元件中使用 v-for 時，key 現在是必須的。
當 Vue.js 用 v-for 正在更新已渲染過的元素清單時，它預設用 “就地複用” 政策。如果資料項的順序被改變，Vue将不是移動 DOM 元素來比對資料項的順序， 而是簡單複用此處每個元素，并且確定它在特定索引下顯示已被渲染過的每個元素。
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，進而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。
示例1：疊代數組
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
</ul>
</div>
<!-- 1.導入vue.js庫 -->
<script src="lib/vue.js"></script>
<script>
// 2. 建立一個Vue的執行個體
var vm = new Vue({
el: '#app',
data: {
list: [
{ "name":"張一", "age": 31},
{ "name":"張二", "age": 21},
{ "name":"張三", "age": 41},
{ "name":"張四", "age": 51},
{ "name":"張五", "age": 61},
],
},
methods:{}
})
</script>
</body>
</html> 複制
浏覽器顯示如下：
示例2：疊代對象中的屬性
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 循環周遊對象身上的屬性 -->
<div v-for="(val, key, i) in userInfo">value值：{{val}} --- key值：{{key}} --- 索引：{{i}}</div>
</div>
<!-- 1.導入vue.js庫 -->
<script src="lib/vue.js"></script>
<script>
// 2. 建立一個Vue的執行個體
var vm = new Vue({
el: '#app',
data: {
userInfo: {
userid: 1,
username: "張三",
age: 30
}
},
methods:{}
})
</script>
</body>
</html> 複制
浏覽器顯示如下：
示例3： 疊代數字
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p v-for="i in 15">這是第 {{i}} 個P标簽</p>
</div>
<!-- 1.導入vue.js庫 -->
<script src="lib/vue.js"></script>
<script>
// 2. 建立一個Vue的執行個體
var vm = new Vue({
el: '#app',
data: {},
methods:{}
})
</script>
</body>
</html> 複制
浏覽器顯示如下：
v-for中使用key的注意事項
2.2.0+ 的版本裡，當在元件中使用 v-for 時，key 現在是必須的，因為沒有key來保障循環中的唯一性，那麼元件則會被打亂。
下面來看一個例子，明确當不用key的時候會出現什麼樣的問題。
不用key的問題示例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<p v-for="item in list" >
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<!-- 1.導入vue.js庫 -->
<script src="lib/vue.js"></script>
<script>
// 2. 建立一個Vue的執行個體
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '趙高' },
{ id: 4, name: '韓非' },
{ id: 5, name: '荀子' }
]
},
methods:{
add(){
// 添加新的資料到隊列最後
this.list.push({ id: this.id, name: this.name })
}
}
})
</script>
</body>
</html> 複制
浏覽器顯示如下：
可以從上面的示例中看到，當添加資料到最後的情況下，原來勾選的5 --- 荀子并沒有影響到順序。
下面看看，如果将資料插入到前面會怎麼樣？
使用
unshift()
方法，将資料添加到隊列的最前面，如下：
那麼，再來執行一下上面的示例，如下：
<p v-for="item in list" >
<input type="checkbox">{{item.id}} --- {{item.name}}
</p> 複制
那麼這時候就要給上面的元件設定一個key，并且綁定一個string/number類型的資料來保障循環資料的唯一性。
這樣才能保障渲染。
使用v-bind設定key的值，保障渲染的資料順序
<!-- 注意： v-for 循環的時候，key 屬性隻能使用 number擷取string -->
<!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 -->
<!-- 在元件中，使用v-for循環的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字元串/數字 類型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p> 複制
再次執行一下剛才錯誤的過程，如下：