Vue3学习笔记(n.0)

vue指令之v-for

首先创建自定义组件(practice5.vue):

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2024-07-05 21:28:45
 * @LastEditors: Mei
 * @LastEditTime: 2024-07-05 21:35:40
 * @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\practice5.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>

  <div>
    <div id="myList" v-for="(item,index) in arr" :key="index">{{ item.name }}

    </div>
  </div>

</template>


<script>
//列表渲染
//为什么循环的时候需要加key
//1.key的作用主要是为了高效的更新虚拟Dom,提高渲染性能
//2.key属性可以避免数据混乱的情况出现
export default{
  data(){
    return{
      arr:[{
        name:"张三"
      },
    {
      name:"李四"
    },
  {
    name:"王五"
  }]
    }
  }
}

</script>

<style scoped>
#myList{
  color: blue;
  background-color: yellow;
  margin-top: 20px;
}
</style>

然后再App.Vue中进行引入使用

最后运行结果为:

在使用v-for渲染列表时有几个注意点:

①循环的时候需要加key
1、作用
1.key的作用主要是为了高效的更新虚拟DOM,提高渲染性能。
2.key属性可以避免数据混乱的情况出现。
2、原理
1.vue实现了一套虚拟DOM,使我们可以不直接操作DOM元素只操作数据,就可以重新渲染页面,而隐藏在背后的原理是高效的Diff算法
2.当页面数据发生变化时,Diff算法只会比较同一层级的节点;
3.如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点后面的子节点;如果节点类型相同,则会重新设置该节点属性,从而实现节点更新
4.使用key给每个节点做一个唯一标识,Diff算法就可以正确识别此节点,"就地更新"找到正确的位置插入新的节点
3、注意
1.key 的值只能是字符串或数字类型
2. key 的值必须具有唯一性(即:key 的值不能重复)
3.建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
4.使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性,实际项目中如果没有id,推荐使用index)
5.建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)

所以,简而言之,在实际的开发中,上面的数组列表一般是后端返回出来的数据,我们需要使用v-for将这些数据进行渲染,但是在使用v-for的时候也必须要加key,并且key的取值要有唯一性,一般都是数据的ID,比如学生列表的学生ID,或商品列表中的商品ID。这样我们在操作这个列表中就不会出现数据混乱的情况。

相关推荐

  1. vue3学习笔记

    2024-07-09 22:18:08       18 阅读
  2. jQuery学习笔记3.0

    2024-07-09 22:18:08       20 阅读
  3. vue3.0规范学习记录

    2024-07-09 22:18:08       38 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 22:18:08       3 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 22:18:08       3 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 22:18:08       2 阅读
  4. Python语言-面向对象

    2024-07-09 22:18:08       2 阅读

热门阅读

  1. 【Rust入门】猜数游戏

    2024-07-09 22:18:08       10 阅读
  2. NVIDIA H100 Tensor Core GPU摘要

    2024-07-09 22:18:08       5 阅读
  3. 环境构建大师:精通Conda中的conda create命令

    2024-07-09 22:18:08       9 阅读
  4. 我的创作4096天纪念日

    2024-07-09 22:18:08       8 阅读
  5. python 高级技巧 0706

    2024-07-09 22:18:08       7 阅读
  6. 前端面试基础html/js/css

    2024-07-09 22:18:08       8 阅读
  7. crontab定时任务不执行原因排查

    2024-07-09 22:18:08       7 阅读
  8. RTOS系统 -- ARM Cortex-M4 RPMSG之通道初始化函数

    2024-07-09 22:18:08       8 阅读
  9. shell中不常见的命令

    2024-07-09 22:18:08       7 阅读
  10. 直播APP开发源码搭建

    2024-07-09 22:18:08       8 阅读
  11. 自己写个简单的vite插件

    2024-07-09 22:18:08       8 阅读
  12. ROS melodic版本卸载---Ubuntu18.04

    2024-07-09 22:18:08       9 阅读