微网站建设的第一步是进行首页的设置,深圳 网站科技,内蒙古建筑培训网官网,多用户电商系统开发目录 1.循环遍历 2.v-for遍历整形变量#xff08;99乘法表#xff09; 3.v-for遍历普通数组 4.v-for遍历数组对象 1.循环遍历 v-for指令基于一个数组渲染一个列表#xff0c;它和JavaScript的遍历语法相似#xff1a; v-for”item in list” list 是一个数组#xff0c; i…目录 1.循环遍历 2.v-for遍历整形变量99乘法表 3.v-for遍历普通数组 4.v-for遍历数组对象 1.循环遍历 v-for指令基于一个数组渲染一个列表它和JavaScript的遍历语法相似 v-for”item in list” list 是一个数组 item 是当前被遍历的对象 ul li v-for”item in list” v-bind:key”item”{{ item }}/li /ul 在数组进行遍历时我们必须给遍历对象绑定一个对应的 key 值以保证对象的唯一性 使用 v-bind:key 指令进行绑定 v-for 中key的作用 1、 key的作用主要是为了高效的更新虛拟DOM通过key可以精准判断两个节点是否是同一个从而避免频繁更新不同元素使得整个patch过程更加高效减少DOM操作量提高性能。 2、 若不设置key可能在列表更新时引发一些隐蔽的bug。如某行数据不该更新的却更新了。 3、vue中在使用相同标签名元素的过渡切换时也会使用到key属性其目的也是为了让vue可以区分它们否则vue只会替换其内部属性而不会触发过渡效果。 2.v-for遍历整形变量99乘法表
h3 aligncenter九九乘法表/h3
hr
table aligncenter border1tr v-fori in 9 :keyitd v-forj in i :keyj{{j}}*{{i}}{{i*j}}/td/tr
/table 3.v-for遍历普通数组 语法 : v-for(item,index) in array item : 数组中的每一项 index : 索引值 如果只需要第一个参数item ,index可以不写,括号可以省略 templatedivh2 aligncenterfor语句的使用方法讲解/h2hrh4 alignleftprev-for指令基于一个数组渲染一个列表它和JavaScript的遍历语法相似v-for”item in list”list是一个数组item是当前被遍历的对象在数组进行遍历时我们必须给遍历对象绑定一个对应的key值以保证对象的唯一性使用v-bind:key指令进行绑定/preulli v-foritem in weeks :keyitem{{item}}/li/ul/div
/template
scriptexport default({name: ForDemo,data(){return {weeks:[星期一,星期二,星期三,星期四,星期五,星期六,星期日]}}
})
/script4.v-for遍历数组对象 语法 : v-for(item,index) in array item : 数组中的每一项(每一个对象) index : 索引值 如果只需要第一个参数item ,index可以不写,括号可以省略 templatedivh2 aligncenterfor语句的使用方法讲解/h2hrh3 aligncenter员工资料列表/h3table aligncenter width800px border1theadtrth员工ID/thth姓名/thth性别/thth年龄/th/tr/theadtr v-forrow in empList :keyrow.empIdtd{{row.empId}}/tdtd{{row.name}}/tdtd{{row.sex}}/tdtd{{row.age}}/td/tr/table/div
/template
scriptexport default({name: For,data(){return {empList:[{empId:1,name:张三,sex:男,age:18},{empId:2,name:李四,sex:男,age:28},{empId:3,name:丽丽,sex:女,age:38},{empId:4,name:晓晓,sex:女,age:16},{empId:5,name:张三丰,sex:男,age:48}]}}
})
/script案例完整代码如下
templatedivh2 aligncenterfor语句的使用方法讲解/h2hrh4 alignleftprev-for指令基于一个数组渲染一个列表它和JavaScript的遍历语法相似v-for”item in list”list是一个数组item是当前被遍历的对象在数组进行遍历时我们必须给遍历对象绑定一个对应的key值以保证对象的唯一性使用v-bind:key指令进行绑定/pre/h4ulli v-foritem in weeks :keyitem{{item}}/li/ulh3 aligncenter九九乘法表/h3hrtable aligncenter border1tr v-fori in 9 :keyitd v-forj in i :keyj{{j}}*{{i}}{{i*j}}/td/tr/tableh3 aligncenter员工资料列表/h3table aligncenter width800px border1theadtrth员工ID/thth姓名/thth性别/thth年龄/th/tr/theadtr v-forrow in empList :keyrow.empIdtd{{row.empId}}/tdtd{{row.name}}/tdtd{{row.sex}}/tdtd{{row.age}}/td/tr/table/div
/template
scriptexport default({name: For,data(){return {weeks:[星期一,星期二,星期三,星期四,星期五,星期六,星期日],empList:[{empId:1,name:张三,sex:男,age:18},{empId:2,name:李四,sex:男,age:28},{empId:3,name:丽丽,sex:女,age:38},{empId:4,name:晓晓,sex:女,age:16},{empId:5,name:张三丰,sex:男,age:48}]}}
})
/script本人从事软件项目开发20多年2005年开始从事Java工程师系列课程的教学工作录制50多门精品视频课程包含java基础jspweb开发SSH,SSMSpringBootSpringCloud,人工智能在线支付等众多商业项目每门课程都包含有项目实战上课PPT及完整的源代码下载有兴趣的朋友可以看看我的在线课堂
讲师课堂链接https://edu.csdn.net/lecturer/893
