v-for キーの役割
- (*-*)浩オリジナル
- 2020-01-06 10:37:0324868ブラウズ
は現在、配列または要素の一意の識別子として理解できます。要素を追加または削除するとき、この一意の識別子のキーは、それが前の要素であるかどうかを判断するために使用されます。 、要素はキーの値です。この一意の識別子は変更されません。
Vue は v-for, key の属性を提供します: (推奨学習: phpstorm)
key 属性は次の目的で使用できます。 v-for レンダリングの効率を向上させます! Vue は元の要素とデータを変更しませんが、新しい要素を作成し、その中に新しいデータをレンダリングします。
v-for を使用する場合、vue では要素にキー属性を追加する必要があります。このキー属性は次のとおりです。一意の識別子であることを指定してください
キーに割り当てられるコンテンツを変数にすることはできません
1. v-for を記述するときは、要素にキー属性を追加する必要があります
2. キーの主な機能は、レンダリングのパフォーマンスを向上させることです。
3. key 属性によりデータの混乱を回避できます (要素に一時データを持つ要素が含まれる場合、キーを使用しないとデータの混乱が発生します)
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in teachers" :key="item.id">{{ item.name }} <input type="text"></li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
teachers: [
{ id: 1, name: "aaa" },
{ id: 2, name: "bbb" },
{ id: 3, name: "ccc" },
{ id: 4, name: "ddd" }
]
}
});
</script>
</body>
</html>以上がv-for キーの役割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。