v-for key的作用-常見問題-PHP中文網

v-for key的作用

(*-*)浩

發布： 2020-01-06 10:37:03

原創

24848 人瀏覽過

v-for key的作用

目前可以理解為遍歷數組或元素中的唯一標識，增加或刪減元素時，透過這個唯一標識key判斷是否是先前的元素，並且該元素key的值是多少。這個唯一識別是保持不變的。

Vue中為v-for提供了一個屬性，key： （推薦學習：storm##)）##key屬性時可以用##來提升v-for渲染的效率！ vue不會去改變原有的元素和數據，而是創建新的元素然後把新的數據渲染進去

在使用v-for的時候，vue裡面需要我們給元素添加一個key屬性，這個key屬性必須是唯一的識別

給key賦值的內容不能是可變的

1. 在寫v-for的時候，都需要給元素加上一個key屬性

2. key的主要功能就是用來提升渲染效能的！

3.key屬性可以避免資料混亂的情況出現（如果元素中包含了有臨時資料的元素，如果不用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 key的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！