vue中v-if如何写在js中

Question

     <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吗？ 感觉这样多循环一遍是不是不太好

Answer 1

用计算属性把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)"

Answer 2

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

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

Answer 3

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