vue中v-if如何写在js中

qzuser
  • 2
新手上路,请多包涵
     <tr v-for="(item, index) in list" :key="index">
        <th>
          上午
          <button
            v-if="(item.status == 19 || item.status == 20) && item.app != 0"
          ></button>
        </th>
      </tr>

如上代码中,因为判断条件较多,我想把v-if里的代码移到js里, 那是必须要循环list吗? 感觉这样多循环一遍是不是不太好

回复
阅读 674
3 个回答
✓ 已被采纳

用计算属性把list处理下

computed: {
  displayList() {
    return this.list.map(item => ({
      ...item,
      showBtn: (item.status == 19 || item.status == 20) && item.app != 0
    }))
  }
}

然后模板里展开displayList,v-if直接判断showBtn即可

你也可以在methods放个isShowBtn方法.

methods: {
  isShowBtn(item) {
    return (item.status == 19 || item.status == 20) && item.app != 0
  }
}

然后现在的模板里的v-if换成v-if="isShowBtn(item)"

computed: {
    showList(){
        return this.list.filter( (item) => {
            return ( item.status == 19 || item.status == 20 ) && item.app != 0; 
        });
 },    
}

可以在computed里面计算,对list进行filter过滤,返回true为选中,false为过滤,filter最终返回一个过滤后的新数组。

拿到这个数据之后直接循环 加个isShow

你知道吗?

宣传栏