The role of v-for key-Common Problem-php.cn

The role of v-for key

(*-*)浩

Release： 2020-01-06 10:37:03

Original

24882 people have browsed it

The role of v-for key

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>

Copy after login

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!