The role of v-for key
- (*-*)浩Original
- 2020-01-06 10:37:0324817browse
can currently be understood as a unique identifier in an array or element. When adding or deleting an element, this unique identifier key is used to determine whether it is the previous element, and the element is What is the value of key. This unique identifier remains unchanged.
Vue provides an attribute for v-for, key: (recommended learning: phpstorm)
key attribute can be used To improve the efficiency of v-for rendering! Vue will not change the original elements and data, but create new elements and render the new data into them.
When using v-for, vue requires us to add a key attribute to the element. This key attribute must be a unique identifier
The content assigned to the key cannot be variable
1. When writing v-for, you need to assign the element Add a key attribute
2. The main function of key is to improve rendering performance!
3. The key attribute can avoid data confusion (if the element contains elements with temporary data, data confusion will occur if the key is not used)
<!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>The above is the detailed content of The role of v-for key. For more information, please follow other related articles on the PHP Chinese website!