vue实现多条件筛选（代码简洁）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue实现多条件筛选（代码简洁）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

纯vue实现数据筛选逻辑功能，不依赖任何第三方插件、组件，复制粘贴开箱即用

vue实现多条件筛选,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-675252.html

<template>
  <div id="app">
       <div class="container">
            <div class="CationBox">
              <div class="row">
                   <div class="name">平台：</div>
                   <div class="content">
                        <div v-for="(item,index) in PlatformList" :key="index" @click="PlatformVar=item"
                        :class="['item',PlatformVar==item?'actvCss':'']">{{item}}</div>
                   </div>
              </div>
              <div class="row">
                   <div class="name">类型：</div>
                   <div class="content">
                        <div v-for="(item,index) in TypeList" :key="index" @click="TypeVar=item"
                        :class="['item',TypeVar==item?'actvCss':'']">{{item}}</div>
                   </div>
              </div>
              <div class="row">
                   <div class="name">成色：</div>
                   <div class="content">
                        <div v-for="(item,index) in ConditionList" :key="index" @click="ConditionVar=item"
                        :class="['item',ConditionVar==item?'actvCss':'']">{{item}}</div>
                   </div>
              </div>
            </div>
            <!-- 商品展示 -->
            <div class="ContentBox">
                 <div class="DataListBox" v-if="ComDataList.length">
                      <div class="item" v-for="(item,index) in ComDataList" :key="index">
                            <div>{{item.Platform}}</div>
                            <div>{{item.Title}}</div>
                            <div>{{item.Condition}}</div>
                      </div>
                 </div>
                 <div v-else class="nullCss">暂无相关商品~</div>
            </div>
       </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        PlatformVar:"全部",  // 表示当前选中的平台
        TypeVar:"全部",      // 表示当前选中的类型
        ConditionVar:"全部", // 表示当前选中的成色
        PlatformList:["全部","淘宝","天猫","京东","闲鱼","转转"], // 平台
        TypeList:["全部","CPU","显卡","内存条","硬盘"], // 类型
        ConditionList:["全部","全新","打折","二手","停售"], // 成色
        DataList:[ // 模拟接口返回的数据结构
          {id:1,Title:"i9 13900k",Platform:"淘宝",Type:"CPU",Condition:"全新"},
          {id:2,Title:"i9 9900ks",Platform:"闲鱼",Type:"CPU",Condition:"停售"},
          {id:3,Title:"i9 11900k",Platform:"天猫",Type:"CPU",Condition:"全新"},
          {id:4,Title:"i5 13600k",Platform:"转转",Type:"CPU",Condition:"停售"},
          {id:5,Title:"i5 10400f",Platform:"京东",Type:"CPU",Condition:"全新"},
          {id:6,Title:"i5 10400f",Platform:"淘宝",Type:"CPU",Condition:"二手"},
          {id:7,Title:"i3 12100f",Platform:"闲鱼",Type:"CPU",Condition:"打折"},
          {id:8,Title:"i3 10105f",Platform:"淘宝",Type:"CPU",Condition:"二手"},
          {id:9,Title:"i3 10100f",Platform:"京东",Type:"CPU",Condition:"全新"},
          {id:10,Title:"Rtx 2060",Platform:"闲鱼",Type:"显卡",Condition:"二手"},
          {id:11,Title:"Rtx 2070",Platform:"转转",Type:"显卡",Condition:"二手"},
          {id:12,Title:"Rtx 2080",Platform:"淘宝",Type:"显卡",Condition:"打折"},
          {id:13,Title:"Gtx 1060",Platform:"淘宝",Type:"显卡",Condition:"全新"},
          {id:14,Title:"Gtx 1070",Platform:"闲鱼",Type:"显卡",Condition:"二手"},
          {id:15,Title:"Gtx 1080",Platform:"京东",Type:"显卡",Condition:"全新"},
          {id:16,Title:"Rtx 3060",Platform:"淘宝",Type:"显卡",Condition:"全新"},
          {id:17,Title:"Rtx 3070",Platform:"淘宝",Type:"显卡",Condition:"全新"},
          {id:18,Title:"Rtx 3090",Platform:"京东",Type:"显卡",Condition:"全新"},
          {id:19,Title:"爱国者 ddr4 2666",Platform:"京东",Type:"内存条",Condition:"全新"},
          {id:20,Title:"爱国者 ddr4 3000",Platform:"闲鱼",Type:"内存条",Condition:"二手"},
          {id:21,Title:"爱国者 ddr4 3200",Platform:"淘宝",Type:"内存条",Condition:"打折"},
          {id:22,Title:"英睿达 ddr4 2666",Platform:"淘宝",Type:"内存条",Condition:"停售"},
          {id:23,Title:"英睿达 ddr4 3000",Platform:"闲鱼",Type:"内存条",Condition:"二手"},
          {id:24,Title:"英睿达 ddr4 3200",Platform:"天猫",Type:"内存条",Condition:"全新"},
          {id:25,Title:"金士顿 ddr4 2666",Platform:"淘宝",Type:"内存条",Condition:"停售"},
          {id:26,Title:"金士顿 ddr4 3000",Platform:"闲鱼",Type:"内存条",Condition:"二手"},
          {id:27,Title:"金士顿 ddr4 3200",Platform:"淘宝",Type:"内存条",Condition:"打折"},
          {id:28,Title:"三星 512Gb",Platform:"天猫",Type:"硬盘",Condition:"全新"},
          {id:29,Title:"三星 256Gb",Platform:"闲鱼",Type:"硬盘",Condition:"二手"},
          {id:30,Title:"三星 128Gb",Platform:"淘宝",Type:"硬盘",Condition:"打折"},
          {id:31,Title:"七彩虹 512Gb",Platform:"闲鱼",Type:"硬盘",Condition:"二手"},
          {id:32,Title:"七彩虹 256Gb",Platform:"京东",Type:"硬盘",Condition:"全新"},
          {id:33,Title:"七彩虹 128Gb",Platform:"淘宝",Type:"硬盘",Condition:"全新"},
          {id:34,Title:"东芝 512Gb",Platform:"转转",Type:"硬盘",Condition:"全新"},
          {id:35,Title:"东芝 256Gb",Platform:"淘宝",Type:"硬盘",Condition:"二手"},
          {id:36,Title:"东芝 128Gb",Platform:"京东",Type:"硬盘",Condition:"停售"},
        ]
      };
    },
    computed: {
      ComDataList(){
        return this.DataList.filter((item) => {
        	if((this.PlatformVar=="全部"||this.PlatformVar==item.Platform)&&
        	   (this.TypeVar=="全部"||this.TypeVar==item.Type)&&
        	   (this.ConditionVar=="全部"||this.ConditionVar==item.Condition)){
        	    return item // 把符合条件的数据返回,模板中通过this.ComDataList可直接动态读取数据
        	}
        })
      },
    },
    mounted() {

    },
    methods: {

    }
  };
</script>
<style>
  * {
     font-size: 14px;
     color: #333;
     box-sizing: border-box;
   }
  .container{
    margin: 100px auto;
    width: 700px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  .CationBox{
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  .row{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
  }
  .row > div{
    flex-shrink: 0;
  }
  .row .content{
    flex: 1;
    display: flex;
  }
  .row .content .item{
    border-radius: 3px;
    color: #666;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
  }
  .row .content .actvCss{
    background: #39b8ff;
    color: #fff;
  }
  .ContentBox{
    width: 100%;
    height: 450px;
    overflow: auto;
    padding: 10px;
  }
  .DataListBox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
 ::-webkit-scrollbar {
   display: none; /* Chrome Safari */
 }
  .DataListBox .item{
    padding: 2px 4px;
    flex-shrink: 0;
    width: 19%;
    height: 60px;
    color: #666;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin-right: 1.25%;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .DataListBox .item div{
    font-size: 12px;
  }
  .DataListBox .item:nth-child(5n){
    /* 需要一行显示几个商品,nth-child(5n)里的数字就设置成几n */
    margin-right: 0px;
  }
  .nullCss{
    margin: 60px auto;
    font-size: 14px;
    text-align: center;
    color: #999;
  }
</style>

到了这里，关于vue实现多条件筛选（代码简洁）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！