VUE中 v-for同时使用v-if 后再用v-else

Question

在项目中轮循数组v-for，然后根据关键词匹配显示筛选内容，用的v-if的二元表达式，在使用v-else后出现的bug，出现了多个v-else的内容，代码如下：<input v-model='filter' type='text' > //0:全部 1:类型1 2:类型2//如果有类型 需要判断item中的另一个关键字段 type 0:显示 1:不显示<div v-for="(item,index) in list" :key="index" v-if="filter==0?true:filter==item.type?item.type==0?true:false:false">{{item.name}}</div> <div v-else>没有数据</div> <script> export default {   data() {    return {         filter:0,         list:[             {name:1,type=1},             {name:2,type=1},             {name:3,type=2},             {name:4,type=2},             {name:5,type=3}             ]         }      }   } </script>望高手解答下，是否有解决方案，或者优化的地方，感谢

Answer 1

建议使用computed计算出筛选后的数据,然后再判断循环
computed类似这样

computed:{
    filtered_list(){        return this.list && this.list.filter(item=>this.filter===0 || item.type===this.filter);
    }
}