vue實現(xiàn)多條件篩選超簡潔代碼
更新時間：2023年09月07日 08:25:11 作者：香精煎漁
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)多條件篩選的相關(guān)資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下
純vue實現(xiàn)數(shù)據(jù)篩選邏輯功能，不依賴任何第三方插件、組件，復(fù)制粘貼開箱即用
<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">暫無相關(guān)商品~</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
PlatformVar:"全部", // 表示當(dāng)前選中的平臺
TypeVar:"全部", // 表示當(dāng)前選中的類型
ConditionVar:"全部", // 表示當(dāng)前選中的成色
PlatformList:["全部","淘寶","天貓","京東","閑魚","轉(zhuǎn)轉(zhuǎn)"], // 平臺
TypeList:["全部","CPU","顯卡","內(nèi)存條","硬盤"], // 類型
ConditionList:["全部","全新","打折","二手","停售"], // 成色
DataList:[ // 模擬接口返回的數(shù)據(jù)結(jié)構(gòu)
{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:"轉(zhuǎn)轉(zhuǎn)",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:"轉(zhuǎn)轉(zhuǎn)",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:"內(nèi)存條",Condition:"全新"},
{id:20,Title:"愛國者 ddr4 3000",Platform:"閑魚",Type:"內(nèi)存條",Condition:"二手"},
{id:21,Title:"愛國者 ddr4 3200",Platform:"淘寶",Type:"內(nèi)存條",Condition:"打折"},
{id:22,Title:"英睿達 ddr4 2666",Platform:"淘寶",Type:"內(nèi)存條",Condition:"停售"},
{id:23,Title:"英睿達 ddr4 3000",Platform:"閑魚",Type:"內(nèi)存條",Condition:"二手"},
{id:24,Title:"英睿達 ddr4 3200",Platform:"天貓",Type:"內(nèi)存條",Condition:"全新"},
{id:25,Title:"金士頓 ddr4 2666",Platform:"淘寶",Type:"內(nèi)存條",Condition:"停售"},
{id:26,Title:"金士頓 ddr4 3000",Platform:"閑魚",Type:"內(nèi)存條",Condition:"二手"},
{id:27,Title:"金士頓 ddr4 3200",Platform:"淘寶",Type:"內(nèi)存條",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:"轉(zhuǎn)轉(zhuǎn)",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 // 把符合條件的數(shù)據(jù)返回,模板中通過this.ComDataList可直接動態(tài)讀取數(shù)據(jù)
}
})
},
},
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)里的數(shù)字就設(shè)置成幾n */
margin-right: 0px;
}
.nullCss{
margin: 60px auto;
font-size: 14px;
text-align: center;
color: #999;
}
</style>總結(jié)
到此這篇關(guān)于vue實現(xiàn)多條件篩選的文章就介紹到這了,更多相關(guān)vue多條件篩選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue mint-ui學(xué)習(xí)筆記之picker的使用
本篇文章主要介紹了vue mint-ui學(xué)習(xí)筆記之picker的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex新手進階篇之取值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
ant design vue中table表格滾動加載實現(xiàn)思路
在處理一寫數(shù)據(jù)量特別大的情況下,我們不能把后端的數(shù)據(jù)一次性全部拿到前端在table表格中展示,為了考慮性能優(yōu)化,使用了滾動加載表格數(shù)據(jù),這篇文章主要介紹了ant design vue中table表格滾動加載實現(xiàn)思路,需要的朋友可以參考下2024-07-07
這篇文章為大家詳細主要介紹了如何基于Vue實現(xiàn)本地消息隊列MQ, 讓消息延遲消費或者做緩存,文中的示例代碼講解詳細,需要的可以參考一下2024-02-02
vue element-ui實現(xiàn)input輸入框金額數(shù)字添加千分位
這篇文章主要介紹了vue element-ui實現(xiàn)input輸入框金額數(shù)字添加千分位,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
在 Vue 3 中,一個重要的特性是 watch 選項,它允許開發(fā)者對數(shù)據(jù)變化進行觀察,本篇博客將詳細介紹如何在 Vue 3 中使用 watch 進行深度觀察,特別是在使用 setup 語法糖時,需要的朋友可以參考下2024-11-11
TinyMCE Vue是TinyMCE官方發(fā)布的Vue組件，可以更輕松地在Vue應(yīng)用程序中使用TinyMCE，這篇文章主要介紹了vue中tinymce的使用,需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于Vue前端生成UUID的相關(guān)資料,前端需要生成一個唯一標(biāo)識符作為ID時,可以使用Vue UUID插件,比如生成訂單號、用戶ID等等,需要的朋友可以參考下2023-09-09
關(guān)于Vue中的計算屬性和監(jiān)聽屬性詳解
這篇文章主要介紹了關(guān)于Vue中的計算屬性和監(jiān)聽屬性詳解,Vue.js模板內(nèi)的表達式非常便利，但是設(shè)計它們的初衷是用于簡單運算的，在模板內(nèi)放入過長的或復(fù)雜的邏輯時，會讓模板過重且難以維護,需要的朋友可以參考下2023-05-05
v-if和v-show可能是日常開發(fā)中最常用的兩個指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區(qū)別的。接下來通過本文給大家分享vue渲染時閃爍{{}}的問題及解決方法，感興趣的朋友一起看看吧2018-03-03