做网站上传照片的尺寸,宁波seo哪家好,网站主页设计模板,做地方旅游网站目的意义v-if和v-for
v-if 用来显示和隐藏元素 flag为true时#xff0c;dom元素会被删除达到隐藏效果 div classboxIf v-ifflag/divv-for用来进行遍历#xff0c;可以遍历数字对象数组#xff0c;会将整个元素遍历指定次数
!-- 遍…v-if和v-for
v-if 用来显示和隐藏元素 flag为true时dom元素会被删除达到隐藏效果 div classboxIf v-ifflag/divv-for用来进行遍历可以遍历数字对象数组会将整个元素遍历指定次数
!-- 遍历数字--div v-fornum in 5 :keynum{{ num }}/div
!-- 遍历对象--div v-for(value,key) in obj :keykey{{value}}/div
!-- 遍历数组--div v-for(item,index) in list :keyindex{{item}}/div如果将遍历元素v-for和删除元素v-if连用会发生什么
v-if和v-for的优先级
首先在vue官网中是不建议v-for和v-if连用
在Vue 2中v-for的优先级比v-if高因此在连用的时候会先进行v-for将所有元素渲染到页面上之后再进行v-if判断删除元素这样会导致性能的浪费每次先渲染元素再进行判断删除 官网上给了一个例子可以简单理解一下。在这个例子中会先将用户进行遍历渲染(v-for)再去判断用户是否为活跃用于v-if。在这里只需要活跃用户渲染但是由于v-for的优先级更高因此无论是否为活跃用户都会渲染这样会造成资源的浪费。
ulliv-foruser in usersv-ifuser.isActive:keyuser.id{{ user.name }}/li
/ul在Vue 3中v-if的优先级比v-for高 看看官网上给的例子给一个用户列表遍历活跃用户user.isActive为true。
ulliv-foruser in usersv-ifuser.isActive:keyuser.id{{ user.name }}/li
/ulWill throw an error, because the v-if directive will be evaluated first and the iteration variable user does not exist at this moment.将抛出一个错误因为v-if指令将首先求值并且迭代变量user此时不存在。 由官网给的解释可以看出直接将v-if和v-for连用可能会出现报错因此不建议在同一节点中连用。
解决方案
vue2提供的解决方案 1.添加一个属性。将 users 替换为一个计算属性 (比如 activeUsers)让其返回过滤后的列表。 2.将 v-if 移动至外层容器元素上。 activeUsers过滤出满足条件的用户将遍历的users改为activeUsers
computed: {activeUsers: function () {return this.users.filter(function (user) {return user.isActive})}
}ulliv-foruser in activeUsers:keyuser.id{{ user.name }}/li
/ul或者使用嵌套关系将v-if添加到外层元素上。先判断是否要展示用户信息满足条件再进行渲染。
ul v-ifshouldShowUsersliv-foruser in users:keyuser.id{{ user.name }}/li
/ulVue2风格指南相关部分
Vue3提供的解决方案 1.添加一个属性。将 users 替换为一个计算属性 (比如 activeUsers)让其返回过滤后的列表。与Vue2相同 2.将 v-for移动至外层容器元素上。 第一个方法与vue2相同不过多进行解释。 第二个方法嵌套。与vue2不同的是在vue3中将v-for移动至外层的元素上。
ultemplate v-foruser in users :keyuser.idli v-ifuser.isActive{{ user.name }}/li/template
/ulVue3风格指南相关部分
总结
在Vue2中v-for的优先级更高。在Vue3中v-if的优先级更高。 无论哪个优先级更高都不建议在同一节点连用v-if和v-for。
