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

  • 小规模免征增值税额度2023
  • 外国企业无偿援助的进口设备
  • 小规模纳税人合理避税
  • 进口关税计算公式 案例
  • 小规模纳税人不能抵扣进项税额
  • 生产工人工资和福利费是产品成本项目对吗
  • 个税申报没填过租房信息,却有怎么回事
  • 采购服务需要缴什么税
  • 到国税局领增值税发票需带什么
  • 外出经营能自带食物吗
  • 超市预付卡销售开票管理规定最新
  • 开给天猫的服务费分录如何做
  • 房地产企业用电计入什么科目
  • 增值税发票暂时无法查看怎么回事
  • 委托贷款利息收入现金流
  • 广告费发票的税率
  • 工资表是放在计提还是发放
  • 资产负债表用来调节利润的负债
  • 同一控制下股权转让印花税
  • 一次性收取跨年租金房产税怎么交
  • 企业所得税减免政策2023
  • 核定征收的合伙企业 取得的投资收益
  • 华为Mate50Pro配置多少
  • 电脑怎么安装安卓软件
  • 固定资产的处理方法
  • 开办费计入长期待摊费用汇算清缴时怎么填写
  • 质权的成立时间为
  • 路由器2.4g和4g有什么区别
  • 冲销去年暂估收入
  • sdi是什么文件
  • 总公司拨给分公司款需要交税吗
  • 在承租的土地上建房
  • 税收保全措施的期限一般不超过几个月
  • 内部审计类型分为哪几种
  • linux中断原理
  • vue3+ts写法
  • 个人应纳税所得额是要交钱吗
  • 企业发给员工的食堂补贴需要交个税吗
  • 扣缴义务人应扣未扣如何处罚
  • 支付境外培训费代扣啥税
  • 原生ajax和axios的区别
  • web前端三大主流框架vue
  • vue前端项目实战
  • 印花税计提比例是多少
  • 应付票据核算的内容
  • 资产账面价值大于计税基础产生递延所得税负债
  • 公司买汽车计入什么费用
  • 帝国cms移动端
  • SQLite学习手册(SQLite在线备份)
  • 无形资产减值准备可以转回吗
  • 会计自制原始凭证有哪些
  • 企业接受捐赠固定资产的运费怎么做账
  • 开发成本属于哪一类科目
  • 内部产生的商誉应确认为无形资产
  • 如何理解什么是半殖民地半封建社会
  • 没报税可以先清卡吗
  • 限售股锁定期延长
  • 制造费用影响什么
  • 汇算清缴产生的企业所得税如何做账
  • 企业成本结转分录
  • 长期待摊费用是非流动资产吗
  • mysql多表连接的方式
  • window9为什么没有
  • xp查看系统
  • linux常用命令详解
  • windows8怎么调整亮度
  • awk命令的功能是什么
  • vmware中安装centos7
  • win8.1怎么关闭更新
  • win8如何更改用户名字?
  • win10系统如何关闭
  • 网关绑定失败怎么设置
  • python获取当前地址
  • 用Fragment+ViewPager搭建万能的android界面
  • android设置移动网络灰色是什么原因
  • 不用javascript可以吗
  • jQuery EasyUI Pagination实现分页的常用方法
  • 挂车买保险是怎么买的
  • 税务局追缴社保流程及办理期限
  • 农产品进项税额核定扣除办法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设