编程教育资源分享平台

网站首页 > 后端开发 正文

vue3.x 中 v-if 与 v-for 的优先级

luoriw 2024-02-01 14:27:28 后端开发 9 ℃ 0 评论

vue2.x版本中在一个元素上同时使用 v-if 和 v-for 时,v-for 优先级更高

//html
<p v-for="item in arr2" v-if="item.val>1">
 {{item.val}}
</p>
//js
data:{
 arr2:[{val:1},{val:2},{val:3}]
 },

vue3.x 版本中 v-if 总是优先于 v-for

  • 这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名:

同时使用 v-if 和 v-for 是不推荐的

  • 可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块
...
<template v-for="item in arr2">
  <p v-if="item.val>1">{{item.val}}</p>
 </template>
...
data:function(){
 return {
  arr2:[{val:1},{val:2},{val:3}]
  }
}
...

最好办法是通过创建计算属性筛选出列表,减少在模板层面管理相关逻辑

<p v-for="item in newArr">{{item.val}}</p>
...
data:function(){
 return {
  arr:[{val:1},{val:2},{val:3}]
 }
},
computed:{
 newArr(){
  return this.arr.filter(item=>{
   return item.val>1
  })
 }
},
...

总结:

  • vue2.x版本中v-for比v-if优先级更高
  • vue3.x版本中v-if比v-for优先级更高
  • 同一个元素中避免同时使用v-if、v-for
  • 使用计算属性筛选列表

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言