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

  • 本期应补退税额和期末未缴税额
  • 保障性住房土地增值税预征
  • 财务软件里怎么输大于等于号
  • 金蝶软件可以实现一键报税吗
  • 债权债务互抵怎么做账
  • 去税务局开增值税专用发票需要缴费吗
  • 收据大写十万元整怎么写标准
  • 进出口企业外汇收支平衡
  • 税务局代开的进项票需要认证吗
  • 当月发票不够用领用了下个月,下个月还能再领吗
  • 建筑工程类发票
  • 法人转钱进公账要交税吗
  • 被投资企业减资怎么做账
  • 企业设备安装发票税率为多少?
  • 外地预缴个人所得税会计分录
  • 通用机打发票没写税额
  • 单边征收
  • 资产减值准备的账务处理
  • 如何辩别这样发票的真伪?
  • 分期收款如何确认成本
  • 子公司能转让吗
  • 城镇土地使用税每年都要交吗
  • 桌面图标变成了白色的
  • 手机home键是什么意思图片
  • 苹果11怎么充不上电了
  • 键盘灯无法开启
  • ipssvc.exe - ipssvc是什么进程 有什么作用
  • 收到银行存款利息会计分录
  • 试运行取得的收入如何进行财税处理
  • 运输合同印花税税率
  • 纳税人代扣代缴
  • php pathinfo
  • 转让居民企业的股权所得交企业所得税吗
  • 固定资产没有发票可以计提折旧吗
  • thinkphp登录
  • 政策性搬迁补偿收入
  • thinkphp+vue
  • 新政府会计制度科目解读
  • vue父子组件传值方法
  • 猿创征文,宝藏工具篇
  • vue的一些面试题
  • 【机器学习】前置知识:矩阵的表示与定义 | Identity 身份矩阵 | 逆矩阵和转置 | 标量乘法
  • ubuntu端口不能远程访问
  • 其他综合收益在资产负债表中如何填列
  • 普通增值发票作废税务局能查到吗
  • 树结构ADT知识点思维导图
  • 应收补贴款是什么
  • 税款要在15号前扣吗
  • 速达建账套期初数据
  • 企业当期营业收入的计算
  • 事业单位无形资产包括
  • 财产租赁合同印花税申报期限
  • 购进商品售价金额核算
  • 会计做账的凭据是什么
  • 期末结转生产成本的账户
  • 免税的发票什么样子
  • 应交税费科目账务处理
  • 销售不动产计税税率
  • 账簿设计要以()为前提
  • windows hellopin是什么意思
  • centos 操作
  • ie10和ie11
  • xp系统本地用户和组在哪里
  • xp系统操作全程图解
  • 史上最详细的mrtg(Multi Router Traffic Grapher)设置说明
  • win7的系统升级win10
  • win7彻底删除的文件怎么恢复
  • win7旗舰版怎么重装系统教程
  • linux系统默认启动级别
  • android中使用md5后报非法延续字节
  • vue scoped属性作用?实现原理
  • 文件夹权限命令
  • flask开发实例
  • python爬虫介绍
  • node项目部署
  • jquery原理解析
  • 支付给境外的特许权使用费
  • 提高税务管理水平,降低税务风险
  • 课税对象与征税对象一样吗
  • 电费增值税专用发票如何抵税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设