位置: IT常识 - 正文

vue中的v-for循环(vuev-for循环k值的意义)

编辑:rootadmin
vue中的v-for循环  1.v-for遍历普通数组in前面如果是一个变量,那么该变量保存的是数组中的数据in前面如果是两个变量,那么第一个变量保存的是数组中的数据,第二个变量保存的是下标<!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="app"> <!-- 绑定事件 v-on: 简写为@ --> <button @click="add">点击在数组最后添加元素</button> <ul style="list-style-type: none;"> <!-- item是数组里面的元素 index是数组的下标 --> <li v-for="(item,index) in list">{{index}}-{{item}}</li> </ul> </div> <script src="/vue.js"></script> <script> new Vue({ el: '#app', data: { list: ['猪方', '战神', '小金子', '楠神'] }, methods: { add() { this.list.push('黑牛') } }, }) </script></body></html>2.v-for遍历对象

推荐整理分享vue中的v-for循环(vuev-for循环k值的意义),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue里v-for,vue中的v-for循环对象数组,vue里的for循环,vue的v-for循环原理,vuefor循环的key,vue的foreach循环,vue的v-for循环原理,vue里的for循环,内容如对您有帮助,希望把文章链接给更多的朋友!

如果是一个变量,那么保存的是对象中的属性值

如果是两个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名

如果是三个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名,第三个变量保存的是下标

v-for="o1 in obj"          o1:属性值

vue中的v-for循环(vuev-for循环k值的意义)

v-for="(o1,o2) in obj"     o1:属性值  o2:属性名

v-for="(o1,o2,o3) in obj"  o1:属性值  o2:属性名  o3:下标  

<!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="app"> <ul> <li v-for="item in obj">{{item}}</li> <hr> <li v-for="(val,key) in obj">{{ key }}-{{ val }}</li> </ul> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { obj: { name: '卡拉米', age: 16, sex: '男', } } }) </script></body></html>3.v-for循环数字

in后面不仅可以放数组、对象数组、对象,还可以放数字

在in前面用一个变量存储当前次数,注意:此变量是从1开始,而不是从0开始

<!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="app"> <ul style="list-style-type: none;"> <!-- v-for='遍历的数 in 遍历的范围' --> <li v-for="num in 9">{{num}}</li> </ul> </div> <script src="/vue.js"></script> <script> new Vue({ el: '#app', }) </script></body></html>4. Key是什么?

Key 特殊属性主要用做 Vue 的虚拟 DOM 算法在将新节点列表与旧列表进行比较时识别 VNode 的提示。在没有键的情况下,Vue 使用一种算法来最小化元素移动,并尝试尽可能多地就地修补/重用相同类型的元素。使用键,它将根据键的顺序更改对元素进行重新排序,并且不再存在键的元素将始终被删除/销毁。

 5.有无Key值不同调用方法

Vue内部会对有无Key值的for循环进行不同方法的处理

(1) patchKeyedChildren

有 Key, 进行 patchKeyedChildren

<!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="app"> <!-- @click="list.splice(下标,删除的数量,添加的元素)" --> <button @click="list.splice(1,0,{name:'狗屎',age:11,sex:'男',id:4})">点击添加对象</button> <ul> <li v-for="item in list" :key="item.id"> <!-- 单选框 --> <input type="checkbox"> <!-- 行内元素 --> <span>{{item.name}}</span> </li> </ul> </div> <script src="/vue.js"></script> <script> new Vue({ el:'#app', data:{ list:[ {name:'战神',age:18,sex:'男',id:1}, {name:'金子',age:18,sex:'男',id:2}, {name:'铜牌',age:18,sex:'男',id:3} ] } }) </script></body></html>(2)patchUnKeyedChildren

没有 Key ,进行 patchUnKeyedChildren

<!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="app"> <!-- @click="list.splice(下标,删除的数量,添加的元素)" --> <button @click="list.splice(1,0,{name:'狗屎',age:11,sex:'男',id:4})">点击添加对象</button> <ul> <li v-for="item in list"> <!-- 单选框 --> <input type="checkbox"> <!-- 行内元素 --> <span>{{item.name}}</span> </li> </ul> </div> <script src="/vue.js"></script> <script> new Vue({ el:'#app', data:{ list:[ {name:'战神',age:18,sex:'男',id:1}, {name:'金子',age:18,sex:'男',id:2}, {name:'铜牌',age:18,sex:'男',id:3} ] } }) </script></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/298503.html 转载请保留说明!

上一篇:unipush2.0教程(unipoint)

下一篇:ElementUi 表格自动滚动(elementui表格自定义排序)

  • 苹果13promax怎么退出id(苹果13promax怎么看是不是翻新机)

    苹果13promax怎么退出id(苹果13promax怎么看是不是翻新机)

  • 怎么求和一列数据(怎么样求一列的和)

    怎么求和一列数据(怎么样求一列的和)

  • 荣耀x30支持鸿蒙系统吗(荣耀x30支持鸿蒙吗)

    荣耀x30支持鸿蒙系统吗(荣耀x30支持鸿蒙吗)

  • 支付宝生活圈怎么关闭(支付宝生活圈怎么加好友)

    支付宝生活圈怎么关闭(支付宝生活圈怎么加好友)

  • 锁屏音乐播放器怎么关闭的(锁屏音乐播放器怎么开启)

    锁屏音乐播放器怎么关闭的(锁屏音乐播放器怎么开启)

  • 华为watch3移动eSIM怎么开通

    华为watch3移动eSIM怎么开通

  • 苹果11视频如何美颜(苹果11视频如何截图)

    苹果11视频如何美颜(苹果11视频如何截图)

  • 华为nova5pro支持红外吗(华为nova5pro支持无线充电吗)

    华为nova5pro支持红外吗(华为nova5pro支持无线充电吗)

  • 抖音怎么更改视频背景(抖音怎么更改视频封面图片)

    抖音怎么更改视频背景(抖音怎么更改视频封面图片)

  • 抖音一个视频多少播放量正常(抖音一个视频多少流量)

    抖音一个视频多少播放量正常(抖音一个视频多少流量)

  • 怎么查看淘宝消费总额(怎么查看淘宝消费账单)

    怎么查看淘宝消费总额(怎么查看淘宝消费账单)

  • 手机qq如何不显示年龄(手机QQ如何不显示电脑登录)

    手机qq如何不显示年龄(手机QQ如何不显示电脑登录)

  • 华为p40新机有贴膜吗(华为p40手机自带贴膜还用换吗)

    华为p40新机有贴膜吗(华为p40手机自带贴膜还用换吗)

  • mdmi接口是什么意思(mib接口)

    mdmi接口是什么意思(mib接口)

  • OPPO怎么设置关闭breeno(oppo手机怎么设置关机后闹钟响)

    OPPO怎么设置关闭breeno(oppo手机怎么设置关机后闹钟响)

  • 6s电池容量(vivos76s电池容量)

    6s电池容量(vivos76s电池容量)

  • powerpoint是干什么的(powerpoint干什么的)

    powerpoint是干什么的(powerpoint干什么的)

  • 抖音可以上传多长的视频(抖音可以上传多久的视频)

    抖音可以上传多长的视频(抖音可以上传多久的视频)

  • 操作系统为用户提供什么功能(操作系统为用户提供了两种类型的接口)

    操作系统为用户提供什么功能(操作系统为用户提供了两种类型的接口)

  • iphone不显示4g显示lte(苹果手机不显示4g怎么回事?)

    iphone不显示4g显示lte(苹果手机不显示4g怎么回事?)

  • 高德地图怎么切换横屏(高德地图怎么切换卫星地图)

    高德地图怎么切换横屏(高德地图怎么切换卫星地图)

  • 没保存的ppt可以找回吗(ppt如果没有保存可以找回来吗)

    没保存的ppt可以找回吗(ppt如果没有保存可以找回来吗)

  • 苹果手机怎么防蹭网(苹果手机怎么防窥屏)

    苹果手机怎么防蹭网(苹果手机怎么防窥屏)

  • 小米蓝牙耳机有一个没声音是怎么办(小米蓝牙耳机有杂音滋滋怎么解决)

    小米蓝牙耳机有一个没声音是怎么办(小米蓝牙耳机有杂音滋滋怎么解决)

  • 小米9出厂有自带贴膜吗(小米9出厂带膜吗)

    小米9出厂有自带贴膜吗(小米9出厂带膜吗)

  • 怎样解决电脑IP地址错误(怎样解决电脑卡顿)

    怎样解决电脑IP地址错误(怎样解决电脑卡顿)

  • 在Win7系统中,网卡mac地址怎么查看?(在win7系统中将打开窗口拖到屏幕顶端)

    在Win7系统中,网卡mac地址怎么查看?(在win7系统中将打开窗口拖到屏幕顶端)

  • bart命令 -文件完整性扫描和报告(batset命令)

    bart命令 -文件完整性扫描和报告(batset命令)

  • 税务局退回个税手续费会计分录
  • 金税盘抵减增值税的账务处理
  • 什么是反避税税率
  • 应交税费应交增值税减免税款
  • 信息采集需要填两个家庭成员,但只能有一个监护人
  • 小规模纳税人开工程款税率是多少
  • 农业种植需要缴税吗
  • 分公司收到的总部拨款会计如何处理
  • 水利事业单位基建并账分录怎么写?
  • 应交税金成负数
  • 旅游服务费可以抵扣增值税
  • 占用土地行为不征收耕地占用税有哪些?
  • 预交土增税税率
  • 分公司是否需要章程
  • 金税三期上线后的税收征管问题
  • 员工宿舍可以扣除住房租金支出吗
  • 利用退休人员避孕措施
  • 1697510021
  • 滞留海关发票是谁开
  • 原材料退库怎么做凭证
  • 企业对外股权投资涉及税收
  • 诈骗犯查询
  • PHP:xml_get_current_byte_index()的用法_XML解析器函数
  • php数组函数,选班长
  • 电脑重装系统怎么激活
  • 在linux系统中 用来存放系统所需
  • 长期停工的影响
  • thinkphp删除数据
  • thinkphp ajaxfileupload实现异步上传图片的示例
  • vue中响应式是什么意思
  • 为公司垫付费用,怎么要回
  • 纳税检查调整的销售额确认收入吗
  • php怎么访问本地的网页
  • php身份证号码验证
  • php怎么变成txt
  • php依赖注入的三种方式
  • 城建税5%的是什么情况
  • 年底所得税怎么算
  • 印花税的花贴在哪里
  • 残疾人个税减免标准
  • 进料核销应调整哪些项目
  • 公司注册资金表格模板
  • 固定资产包括无形资产吗?
  • 出售固定资产如何申报企业所得税
  • 工程提成会计分录怎么做
  • 小企业购入债券作为长期债券投资,应将相关税费计入
  • 小规模城建税减半征收2020新政策
  • 一般纳税人结转税额怎么做会计分录
  • 申请财产损失会计分录
  • 增值税多缴税款可以抵缴以后
  • 股东以固定资产投资要交增值税?
  • 发票冲红重新开具怎么做账务处理
  • 其他权益工具投资公允价值变动计入什么科目
  • 售房中心给客人怎么说
  • 过路费计入差旅费还是车辆
  • 建设工程中设备计入包干价是否合法
  • 工商注册资本什么意思
  • 工业企业中制造费用包括哪些内容
  • 修改mysql用户权限
  • ubuntu更新软件
  • 新装的ubuntu18没有网络
  • centos7查看目录
  • 进程audiodg.exe
  • 360rps.exe
  • psimsvc.exe - psimsvc是什么进程 有什么用
  • 笔记本拔掉硬盘开机没反应
  • linux如何装
  • win7 24小时制
  • android怎么添加按钮
  • 动画时期
  • jquery添加图片
  • nodejs worker
  • jquery开源
  • 从零开始学什么
  • 读取更新包文件发生错误
  • jquery显示当前时间
  • ukey开发票系统怎么升级?
  • 安徽税务发票查询入口
  • 养老专业在职研究生好吗
  • 税控盘可以换成ukey吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设