位置: 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表格自定义排序)

  • 设备出租的账务处理
  • 进口环节缴纳关税计入
  • 税控盘维护费开的是普票可以抵扣吗
  • 比较优先股和普通股
  • 财务报告与财务报表的联系与区别
  • 个税申报赡养老人只能填一个吗
  • 银行日记账期初余额写在什么科目
  • 贷款利息不能抵扣进项税
  • 运费单独开票的账务处理
  • 转账支票存根联图片
  • 怎样进行房产置换的账务处理
  • 行政单位特殊人工手机电话费是否可以报销
  • 利润分配的核算PPT
  • 外贸企业视同内销进项可以抵扣吗
  • 拆迁车间
  • 代扣代缴增值税纳税义务发生时间
  • 存货取得长期股权投资
  • 付给其他公司的利息怎么做账
  • 顾客退货补差价怎么做账?
  • 冲回多提所得税
  • 应交增值税账面数
  • 企业一般户可以扣税吗
  • 代开专用发票的数量单价单位怎么写?
  • 公司缴纳递延所得税吗
  • 劳务挂靠需要开票吗
  • 调整固定资产原值减少
  • 增值税一般纳税人是什么意思
  • macos big sur如何
  • 税负率的计算方法公式
  • 从银行提取备用金填制什么凭证
  • 收到棚户区改造资金
  • 差额征税通俗理解
  • 政策性搬迁的会计处理
  • win10组策略编辑器打不开怎么办
  • pddpic是什么文件
  • 查补以前年度所得税如何申报
  • 胡山森林公园门票多少钱一张
  • 如何通过无线路由器连接打印机
  • 前端密码加密
  • laravel视频教程
  • 资产负债表中应收账款根据什么填列
  • 季报的季初季末数怎么填
  • php如何获取当前时间
  • jdbc连接mysql数据库不成功
  • 图像的分类方法及具体的分类
  • 10-Ajax&Vue
  • 已认证未抵扣完的进项
  • 净资产包含哪些方面
  • sql2016异地备份
  • SQL中Exists的用法
  • ipv6的设置
  • 转让古董收入
  • 用于出口的进项发票怎么做账
  • 印花税不小心申报几次怎么办
  • 写字楼里的公司怎么赚钱
  • 外地预缴税款流程
  • 劳务所得税税率表2023年1月
  • 汽车行业的保险返点怎么算
  • 费用报销单如何粘贴票据
  • 应收账款是净额列示吗
  • 企业会计制度怎么写
  • 生产成本增加记哪边
  • 明细分类账如何填写
  • 详解MySQL中ALTER命令的使用
  • Ubuntu16.04 server下配置MySQL,并开启远程连接的方法
  • 怎么用u盘装驱动
  • macbook安装ghost win10
  • mac连不上无线网络
  • 如何快速查询身份证号码
  • windows7右下角网络图标不见了怎么办
  • win10怎么关掉
  • win10共享打印机win7连不上
  • 微软发布ChatGPT功能
  • bat脚本删除注册表
  • webpack配置文件在哪
  • js代码示例
  • javascript tr
  • 建筑工程提前投入使用
  • 矿产资源税的计税依据
  • 生产企业出口退税申报流程操作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设