外贸网站优化在线推广,微商平台都有哪些,网站开发费用说明,百度一下网址是多少一、v-for迭代数组
li v-for(e,index) in emp :keye.id编号{{index1}} 名字{{e.name}} 年龄{{e.age}}
/li
e 是循环数组中的每个元素的别名index 是当前循环的下表#xff0c;从0开始:key 的作用#xff1a; 是为了给 Vue 一个提示…一、v-for迭代数组
li v-for(e,index) in emp :keye.id编号{{index1}} 名字{{e.name}} 年龄{{e.age}}
/li
e 是循环数组中的每个元素的别名index 是当前循环的下表从0开始:key 的作用 是为了给 Vue 一个提示 以便它可以跟踪每个节点的唯一标识它会 基于 key 的变化重新排列元素顺序并且会移除 key 不存在的元素
运行效果如下 二、v-for 迭代对象
li v-for(value,key,index) in user :keyindex第{{index1}} 个属性为{{key}} {{value}}
/li value是属性值key是属性名index索引值从0开始,运行效果如下 注意循环的属性顺序在不同js引擎是不一定的Object.keys()
三、v-if和v-for同时使用时注意
需求 如果年龄大于6666不显示
不推荐v-if和v-for同时作用到同一元素上
作用在同一元素上 vue3: 会先执行v-if,再执行v-for vue2: 会先执行v-for,再执行v-if 因为vue3和vue2执行的顺序不相同不推荐v-if和v-for同时作用到同一元素上使用在同一元素上会报如下错误vue.global.js:1661 [Vue warn]: Property e was accessed during render but is not defined on instance. 解决方式分开使用不作用同一元素上
eg:
ultemplate v-fore in emp :keye.idli v-ife.age 6666{{e.name}} - {{e.age}}/li /template
/ul *在template元素上循环循环出来html查看不到template会自动移除它
完整代码例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlev-for/title
/head
bodydiv idapph3v-for迭代数组/h3!--li v-for(e,index) in emp :keye.ide 是循环数组中的每个元素的别名index 是当前循环的下表从0开始--li v-for(e,index) in emp :keye.id编号{{index1}} 名字{{e.name}} 年龄{{e.age}}/lih3v-for 迭代对象/h3!--value是属性值key是属性名index索引值从0开始注意循环的属性顺序在不同js引擎是不一定的Object.keys()--li v-for(value,key,index) in user :keyindex第{{index1}} 个属性为{{key}} {{value}}/lih3v-if和v-for同时使用时注意/h3!--不推荐v-if和v-for同时作用到同一元素上作用在同一元素上vue3: 会先执行v-if,再执行v-forvue2: 会先执行v-for,再执行v-if因为vue3和vue2执行的顺序不相同不推荐v-if和v-for同时作用到同一元素上解决方式分开使用不作用同一元素上需求如果年龄大于6666不显示在template元素上循环循环出来html查看不到template会自动移除它--ultemplate v-fore in emp :keye.idli v-ife.age 6666{{e.name}} - {{e.age}}/li/template/ul/divscript src./node_modules/vue/dist/vue.global.js/scriptscript typetext/javascriptconst {createApp} Vue;const appcreateApp({data(){return{emp:[ //数组{id:0,name:测试1,age:555},{id:1,name:测试2,age:6666},{id:2,name:测试3,age:7777}],user:{ //对象account: 55555,password: 9988999}}}}).mount(#app);console.log(app,app);/script
/body
/html
