假设我有一个要遍历的项数组,其中每个项都有自己的条件,这些条件基于应用程序的其他部分。
<template v-for="(item, index) in items">
<li>
<i :class="item.iconClass"></i>
{{ item.name }}
<strong :class="item.textClass"> {{ item.function }} </strong>
</li>
</template>
items: [{
iconClass: "fas fa-calendar",
name: 'item1',
textClass: "text_style",
function: this.function1
},
{
iconClass: "fas fa-user",
name: 'item3',
textClass: "text_style",
function: this.function2
}, {
iconClass: "fas fa-clock",
name: 'item3',
textClass: "text_style",
function: this.function2
}
]
item1
有一个函数,该函数包含来自另一个数组的一些数据-
function1() {
if (this.otherArray.otherItem) {
return this.otherArray.otherItem
}
}
现在,如果另一个数组中的数据不存在(为false),则不会显示该数组中的数据,但是item 1
的图标和名称仍然会显示,因为它们不是方法中条件语句的一部分。
那么,如何重写这个方法,以便在条件为false时从列表中隐藏整个项呢?
- 请记住,**
item 2
和item 3
有自己的条件集,所以我不能对模板应用v-if,我需要分别定位这些项。
- 请记住,**
1条答案
按热度按时间jk9hmnmh1#
将
condition
属性添加到数组的每一项-在
template
中,使用此属性隐藏/显示项目-