在v-for里过滤渲染显示（想要与v-if同用，但优先级不够高，试试过滤）

dlpay

已于 2022-08-01 13:48:05 修改

阅读量230

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

于 2022-08-01 13:44:57 首次发布

本文链接：https://blog.csdn.net/weixin_56924782/article/details/126099396

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在v-for里过滤渲染显示（想要与v-if同用，但优先级不够高，试试过滤）

样例

<template>
  <div v-for="(item,index) in List" :key="index">
  	<p>{{item.Title}}</p>
  	<p>{{item.Content}}</p>
    <p>{{item.Time}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List:[
              {
                Title:"苹果",
                Content:"来自中国，美味佳肴。。。",
                Time:"三小时前"
              },
              {
                Title:"橘子",
                Content:"来自越南，食起来很好。。。。",
                Time:"二小时前"
              },
              {
                Title:"苹果",
                Content:"来自中国，美味佳肴。。。",
                Time:"二小时前"
              },
            ]
    }
  }
}
</script>

这时我只想将苹果渲染出来。用到filter
在计算属性中运用computed
示例：

<template>
  <div v-for="(item,index) in List" :key="index">
  	<p>{{item.Title}}</p>
  	<p>{{item.Content}}</p>
    <p>{{item.Time}}</p>
  </div>

<!-- 下面是利用filter过滤 -->
		<!-- 这里循环的是 ListFilter -->
  <div v-for="(item,index) in ListFilter" :key="index">
  	<p>{{item.Title}}</p>
  	<p>{{item.Content}}</p>
    <p>{{item.Time}}</p>
  </div>
</template>

<script>
export default {
//通过计算属性过滤
  computed(){
    ListFilter(){
        return this.List.filter(item =>{
          if(item.Title == "苹果"){
            return item
          }
        })
  },
  
   data() {
    return {
      List:[
              {
                Title:"苹果",
                Content:"来自中国，美味佳肴。。。",
                Time:"三小时前"
              },
              {
                Title:"橘子",
                Content:"来自越南，食起来很好。。。。",
                Time:"二小时前"
              },
              {
                Title:"苹果",
                Content:"来自中国，美味佳肴。。。",
                Time:"二小时前"
              },
            ]
    }
  }
}
</script>