详解vue中v-for和v-if一起使用的替代方法template

目录

• 版本
• 目标效果
• 说明
• 解决方法
• 核心代码片段
• Car.vue

vue中v-for和v-if一起使用的替代方法template

版本

vue 2.9.6
element-ui: 2.15.6

目标效果

说明

在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用

解决方法

1. 选择性地渲染列表，例如根据某个特定属性（category ）来决定不同展示渲染，使用计算属性computed 见https://www.jb51.net/article/247179.htm
2. 使用template占位，将循环放在template中，v-if作用于元素，此方法script中不用定义computed方法

核心代码片段

  奥迪
  
  奔驰
  
  宝马
  

Car.vue

到此这篇关于详解vue中v-for和v-if一起使用的替代方法template的文章就介绍到这了,更多相关vue 替代方法template内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！