一、使用key管理可重複使用的元素
1、相關範例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if-key</title>
</head>
<body>
<div id="app">
<template v-if="Input === 'username'">
<label>用户名：</label>
<input placeholder="请输入你的用户名">
</template>
<template v-else>
<label>邮箱：</label>
<input placeholder="请输入你的邮箱">
</template>
<button v-on:click="changeInput">切换</button>
</div>
<script src="../../plugings/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
Input: "username",
},
methods: {
changeInput() {
if(this.Input === 'username') {
this.Input = 'email';
} else {
this.Input = 'username';
}
}
}
})
</script>
</body>
</html>登入後複製
2、當輸入使用者名稱階段，輸入相關的內容後相關結果如下所示：
3、當點擊切換按鈕後，其相關的結果為：
#4、由以上的結果可以觀察到其在使用者名稱中輸入的內容，當進行相關的切換後在郵箱的相關輸入框中進行了相關的顯示。
5、出現上述情況的原因：
（免費學習影片分享：javascript影片教學）
6、解決方式
為input元素新增具有一個唯一值的key屬性，來告訴Vue這兩個元素是完全獨立的，不要重複使用它們。
修改後其相關的程式碼為：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if-key</title>
</head>
<body>
<div id="app">
<template v-if="Input === 'username'">
<label>用户名：</label>
<input placeholder="请输入你的用户名" key="username">
</template>
<template v-else>
<label>邮箱：</label>
<input placeholder="请输入你的邮箱" key="email">
</template>
<button v-on:click="changeInput">切换</button>
</div>
<script src="../../plugings/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
Input: "username",
},
methods: {
changeInput() {
if(this.Input === 'username') {
this.Input = 'email';
} else {
this.Input = 'username';
}
}
}
})
</script>
</body>
</html>登入後複製
關鍵程式碼如下所示：
二、重複使用和重新排序現有元素
1、相關的範例程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for-key</title>
</head>
<body>
<div id="app">
<p>
ID:<input type="text" v-model="bookId">
书名：<input type="text" v-model="bookName">
<input type="button" @click="add" value="增加">
</p>
<p v-for="item in items">
<input type="checkbox">
<span>ID：{{item.id}}, 书名：{{item.name}}</span>
</p>
</div>
<script src="../../plugings/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
bookId: '',
bookName: '',
items: [
{id: 1, name: "1"},
{id: 2, name: "2"}
]
},
methods: {
add() {
this.items.unshift({
id: this.bookId,
name: this.bookName
})
this.bookId = '';
this.bookName = '';
}
}
})
</script>
</body>
</html>登入後複製
2、相關的運行結果說明
開始時選取ID為1的序列
新增書的相關資訊後，所選的序列變成ID為3的序列
3、產生如上所示的原因
當Vue正在更新使用v-for渲染的元素清單時，它預設使用「就地更新」策略。如果資料項的順序被改變，Vue將不會移動DOM元素來匹配資料項的順序，而是就地更新每個元素，並且確保它們在每個索引位置正確渲染。
4、解決辦法
為清單的每一項提供一個唯一的key屬性。
最後正確的運行結果如下所示：
#原理：為清單中的每一項提供一個唯一的key屬性，可以給Vue一個提示，以便它能追蹤每個節點的身份，從而重複使用和重新排序現有元素。
注意：key屬性的型別只能是string或number型別。
相關推薦：js教學
以上是vue中key的重要角色是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
