如何根据数据过滤器隐藏和显示数据？

Question

我有一些项目想要使用 data-filter 属性进行过滤。 我有三个按钮来过滤不同类型的项目和一个包含所有项目的列表。

 <div class="project-categories d-flex position-relative">
     <a data-filter="all" >All</a>
     <a  data-filter="backend" >Backend</a>
     <a  data-filter="frontend" >Frontend</a>
 </div>
 <div class="row d-flex justify-content-center">
     <div class="project-list row-inner">  
        <div class="project isActive" data-filter="frontend backend"></div>    
        <div class="project isActive" data-filter="backend"></div>    
     </div>
 </div>

如何根据项目的数据过滤属性过滤项目？

Answer 1

您实际上并不需要此逻辑的数据属性。我想你想从一些遗留项目中重写它。另外，我不建议您使用没有href 属性的a 标签，因为它不是语义的。 您可以这样做的一种方法是创建一个计算属性，它将侦听您的过滤器数组。例如：

<div class="project-categories d-flex position-relative">
  <span @click="filterArray.push(all)" >All</span>
  <span  @click="filterArray.push(backend)" >Backend</span>
  <span  @click="filterArray.push(frontend)" >Frontend</span>
</div>
<div class="row d-flex justify-content-center">
 <div class="project-list row-inner">  
    <div class="project isActive" data-filter="frontend backend"> 
     {{ projects }} 
    </div>      
 </div>
</div>

  data() {
    return { 
     filterArray = []
    }
  }
  computed: {
    projects() {
     if(this.filterArray.length) {
      ... your logic
     }
   }
  }