Vue 列表渲染

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <div id="root">
        <!-- 遍历数组 -->
        <ul >
            <li v-for="person in persons" :key="person.id">{{person.name}}---{{person.age}}</li>
        </ul>

          
        <!-- 遍历对象 -->
        <ul>
            <li v-for="(value,key,index) of car" :key="index">{{key}}--{{value}}--{{index}}</li>
        </ul>

        
        <!-- 遍历字符串 -->
        <ul>
            <li  v-for="(value,key) in characte" :key="key">
                    {{key}}--{{value}}  
            </li>
        </ul>

     
        <!-- 遍历指定次数 -->
     
          <ul>
            <li  v-for="(value,index) in 5" :key="index">
                    {{index}}--{{value}}  
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  new Vue({
      el:"#root",
      data: {
        persons:[
          {id:001,name:"张三",age:18},
          {id:002,name:"李四",age:19},
          {id:003,name:"王五",age:20}
      ],
      car:{
          name:"bmw",
          price:"70w",
          color:"black"
      },
      characte:"hello world"
      },
      
  })
</script>
</html>

index作为key值问题

![image-20211116234121103](Vue 列表渲染.assets/image-20211116234121103-16370772839511-16370772878862-16370772928923.png)

![image-20211116234224006](Vue 列表渲染.assets/image-20211116234224006-16370773451444.png)

![image-20211116234258302](Vue 列表渲染.assets/image-20211116234258302-16370773792875.png)

vue没有写key，默认将index设为key

关于key的理解

<!-- 
    面试题:react、vue中的key有什么作用?(key的内部原理)
1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
    若虚拟DOM中内容没变，直接使用之前的真实DOM!
    若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2)旧虚拟DOM中未找到与新虚拟DOM相同的key
    创建新的真实DOM，随后渲染到到页面。
3.用index作为key可能会引发的问题:
   (1) 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
    (2)会产生没有必要的真实DOM更新 => 界面效果没问题，但效率低。
    (3)如果结构中还包含输入类的DOM:
会产生错误DOM更新 => 界面有问题。
4、开发中如何选择key?:
    (1)最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
    (2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <div id="root">
        <!-- 遍历数组 -->
        <ul >
            <li v-for="person in persons" :key="person.id">
                {{person.name}}---{{person.age}} 
                <input type="text">
            </li>
        </ul>

        <button  @click.once="addname">add</button>
      
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  new Vue({
      el:"#root",
      data: {
        persons:[
          {id:001,name:"张三",age:18},
          {id:002,name:"李四",age:19},
          {id:003,name:"王五",age:20}
      ]
      },
      methods: {
          addname(){
              const p={id:004,name:"老刘",age:40};
              this.persons.unshift(p);
          }
      },
  })
</script>
</html>
posted @ 2021-11-17 10:12  ABkjlhkj  阅读(37)  评论(0)    收藏  举报