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

在项目中轮循数组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>

望高手解答下,是否有解决方案,或者优化的地方,感谢

回答:

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

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

回答:

<div v-for="(item,index) in list" :key="index">{{(filter==0?true:filter==item.type?item.type==0?true:false:false)? item.name : '没有数据'}}</div>

判断的逻辑写的有些啰嗦,建议您可以再优化一下,另外建议使用===,不要用==

回答:

逻辑问题

   <ul v-if="list.length > 0">
      <li v-for="(item,index) in list" :key="index">
        <!-- do something -->
      </li>
    </ul>
    <div v-else>没有数据</div>

回答:

v-if 和 v-for 最好不要同时使用,可以使用v-show,如果同时使用,v-if的优先级比v-if高,详见:https://cn.vuejs.org/v2/guide…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注