溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)vue中key的作用是什么，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。
一、使用key管理可復用的元素
1、相關(guān)示例如下所示：
<!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、當輸入用戶名階段，輸入相關(guān)的內(nèi)容后相關(guān)結(jié)果如下所示：
3、當點擊切換按鈕后，其相關(guān)的結(jié)果為：
4、由以上的結(jié)果可以觀察到其在用戶名中輸入的內(nèi)容，當進行相關(guān)的切換后在郵箱的相關(guān)輸入框中進行了相關(guān)的顯示。
5、出現(xiàn)上述情況的原因：
原理：在Vue中為了盡可能高效地渲染元素，通常會復用已有元素，而不是從頭開始進行渲染，這樣做可以使Vue渲染效率變得更高。
示例分析：在上述示例中都使用了相同的<input>元素，Vue為了提高渲染效率，復用了<input>元素，因此在進行相關(guān)的切換中input并未被替換掉，僅僅是替換了它的placeholder屬性。
（免費學習視頻分享：javascript視頻教程）
6、解決方式
為input元素添加具有一個唯一值的key屬性，來告訴Vue這兩個元素是完全獨立的，不要復用它們。
修改后其相關(guān)的代碼為：
<!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>關(guān)鍵代碼如下所示：
二、重用和重新排序現(xiàn)有元素
1、相關(guān)的示例代碼如下所示：
<!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、相關(guān)的運行結(jié)果說明
開始時選中ID為1的序列
新增書的相關(guān)信息后，所選中的序列變成ID為3的序列
3、產(chǎn)生如上所示的原因
當Vue正在更新使用v-for渲染的元素列表時，它默認使用“就地更新”策略。如果數(shù)據(jù)項的順序被改變，Vue將不會移動DOM元素來匹配數(shù)據(jù)項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染。
4、解決辦法
為列表的每一項提供一個唯一的key屬性。
最后正確的運行結(jié)果如下所示：
原理：為列表中的每一項提供一個唯一的key屬性，可以給Vue一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素。
注意：key屬性的類型只能是string或者number類型。
關(guān)于vue中key的作用是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼