首页 > 其他分享 >Vue3 列表渲染以及key值的状态管理 的学习

Vue3 列表渲染以及key值的状态管理 的学习

时间:2024-05-14 21:22:38浏览次数:13  
标签:index 遍历 渲染 items item key Vue3

列表渲染

使用v-for指令来进行一个数组的渲染,
基于item in items其中item是迭代名,items是源数据的数组
且迭代名称也可以自由定义,只需要与后面插值表达式的一致即可
v-for也可以 支持第二个参数进行位置的索引(item,index) in items
还有一个小的注意点
in也可以换成of  一样的用法

v-for遍历

可以遍历数组也可以遍历对象
遍历数组可以是两个参数  item,index
遍历对象可以是三个参数  item,key,index

通过key管理状态

为什么要使用key?
因为vue是默认按照就地更新的策略来进行渲染元素的,
有几个元素假如交换了顺序,vue是不交换顺序,
而是重新进行更新,使用key这个是为了避免这个问题。

key的使用

在每一次进行v-for渲染的时候都建议添加一个key  可以理解
为自定义属性,一般从网络上拿下来的数据都有一个唯一的id,绑定这个id即可

标签:index,遍历,渲染,items,item,key,Vue3
From: https://www.cnblogs.com/JinshanJiao/p/18190345

相关文章

  • 3ds Max与Maya不同之处?两者哪个更适合云渲染?
    3dsMax和Maya都是知名的3D软件,各有其特色。3dsMax以直观的建模和丰富的插件生态闻名;Maya则在动画和角色创作方面更为出色。两者都支持云渲染技术,能帮助用户在云端高效完成项目。一、3dsMax和Maya之间的主要区别:3dsMax和Maya由Autodesk公司开发的3D建模和动画软件......
  • vue3 多服务器域名跨域代理和请求配置
    多服务器域名的跨域配置:同样是在vue.config.js文件中对devServer.proxy进行配置,如下:const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,lintOnSave:false,//关闭eslint检查,devServer:{......
  • CSR客户端渲染和服务器端渲染(SSR)
    CSR指的是客户端渲染(Client-SideRendering)。在客户端渲染中,整个页面的渲染过程发生在用户的浏览器上,而不是在服务器上。在传统的服务器端渲染(SSR)中,服务器负责将页面的HTML内容完全渲染好,并将其发送给浏览器。但在客户端渲染中,浏览器会下载页面的初始HTML结构,然后使用JavaSc......
  • vue3+ts+elementPlus项目搭建
    1.cmd+R  查看是否安装node环境和vue,node-v  出现版本号如果没有,去下载安装,地址: Node.js—DownloadNode.js®(nodejs.org)vue-V   出现版本号如果没有, 输入命令行,全局安装或升级脚手架npminstall-g@vue/cli2.创建vue项目  (项目名......
  • The 'nopython' keyword argument was not supplied to the 'numba.jit' decorator. T
    numba无法支持nopython错误解决错误:The'nopython'keywordargumentwasnotsuppliedtothe'numba.jit'decorator.TheimplicitdefaultvalueforthisargumentiscurrentlyFalse,butitwillbechangedtoTrueinNumba0.59.0.Seehttps://numb......
  • VUE3.0 中如何使用SVG图标
    1.文件下新建SvgIcon文件夹以及子文件index.js,index.vue,svg文件夹(用于存放svg图片) 2.编写index.vue组件<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"/></svg></template><......
  • vue3编译优化之“静态提升”
    前言在上一篇vue3早已具备抛弃虚拟DOM的能力了文章中讲了对于动态节点,vue做的优化是将这些动态节点收集起来,然后当响应式变量修改后进行靶向更新。那么vue对静态节点有没有做什么优化呢?答案是:当然有,对于静态节点会进行“静态提升”。这篇文章我们来看看vue是如何进行静态提升的......
  • 用友畅捷通TPlus-keyEdit.aspx接口存在SQL注入漏洞
    漏洞描述:该漏洞是由于畅捷通T的/tplus/UFAQD/keyEdit.asp接口处未对用户的输入进行过滤和校验,未经身份验证的攻击者可以利用SQL注入漏洞获取数据库中的信息fofa:app="畅捷通-TPlus"POC:GET/tplus/UFAQD/keyEdit.aspx?KeyID=1%27%20and%201=(select%20@@version)%20--&preloa......
  • Vue模板语法、属性绑定、条件渲染的学习
    Vue模板语法:使用插值表达式的内容必须是有结果的内容才可以,就是需要return出来的才可以显示出来。插值表达式所表现的内容为纯文本模式如何避免即所有的逻辑操作都在js里面实现,不要再templete中实现可以完美的避免这个问题。Vue属性绑定1.使用v-bind进行属性绑定语法:v-b......
  • 今天学了vue3的composition API
    代码量:60左右时间:1h搏客量:1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><linkrel="icon"href="/favicon.ico"><metaname="viewport"content="wi......