vue中v-for和v-if一起使用之使用compute的示例代码 vue中v-for和v-if一起使用之使用

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

版本

vue 2.9.6
element-ui: 2.15.6

【vue中v-for和v-if一起使用之使用compute的示例代码】
目标效果

文章图片

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

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

核心代码片段

# html...奥迪{{item.name}}...# script...computed: {links0: function() {return this.links.filter((item) => {return item.category === 0})},links1: function() {return this.links.filter((item) => {return item.category === 1})},links2: function() {return this.links.filter((item) => {return item.category === 2})}},

Car.vue