vue列表循环和key的注意事项

@小朱呀路

于 2022-11-01 17:51:18 发布

阅读量109

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45441173/article/details/127638126

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>
  <body>
    <div id="app"> 
       <div v-for="(item, index) in list" :key="item">
        {{item}} {{index}} 
       </div>
       <div v-for="(value,key, index) in info" :key="key">{{value}} {{key}} {{index}}</div>
        <div v-for="(item, index) in num" :key="item">{{item}} {{index}}</div>  
    </div>
    <script>
      let vm = Vue.createApp({
        data() {
          return {
            list: ["a", "b", "c"],
            info: { usename: "zhuzhu", age: 22 },
            num: 10,
          };
        },
      }).mount("#app");
      
    </script>
  </body>
</html>

在这里插入图片描述
元素不加key出现的问题：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>
  <body>
    <div id="app">
        <!-- key当作index  和不加key错误是一样的 -->
      <div v-for="(item, index) in list" :key="item">
        {{item}} {{index}}
        <input type="text" />
      </div> 
    </div>
    <script>
      let vm = Vue.createApp({
        data() {
          return {
            list: ["a", "b", "c"], 
          };
        },
      }).mount("#app");
      setTimeout(() => {
        vm.list.unshift("d");
      }, 2000);
    </script>
  </body>
</html>