列表過(guò)濾需求分析
文章插圖
- 這里呢有張列表，假設(shè)這個(gè)列表有一百多條數(shù)據(jù)
- 當(dāng)我在這個(gè) 搜索框當(dāng)中 搜索 單個(gè)關(guān)鍵字的時(shí)候 （冬，周，倫），它能把帶了這幾個(gè)關(guān)鍵字的信息都給我羅列出來(lái) === 跟數(shù)據(jù)庫(kù)的 模糊查詢類似
- 這個(gè)需求很常見(jiàn)，請(qǐng)你實(shí)現(xiàn)一下
前置API的復(fù)習(xí)filter該API內(nèi)部需要接受一個(gè)參數(shù)，這個(gè)參數(shù)類型是函數(shù)類型
文章插圖
- 原生js提供的一個(gè)過(guò)濾數(shù)據(jù)的API
- 參考鏈接
- 寫(xiě)個(gè)用法吧
const array = [14, 17, 18, 32, 33, 16, 40];let newArr = array.filter(function(item){ // item 就是該數(shù)組當(dāng)中的每一項(xiàng)// 該API需要提供一個(gè)返回值，這個(gè)返回值是一個(gè)判定條件return item > 14})// 最終結(jié)果 newArr = [17,18,32,33,16,40] 將14過(guò)濾掉了
- filter并不會(huì)改變?cè)袛?shù)組的結(jié)構(gòu)，會(huì)返回一個(gè)新的數(shù)組
計(jì)算屬性實(shí)現(xiàn)使用計(jì)算屬性來(lái)實(shí)現(xiàn)可能要麻煩點(diǎn)，但是我會(huì)詳細(xì)的把步驟寫(xiě)下來(lái)
知識(shí)回顧
- 計(jì)算屬性是vue當(dāng)中的一個(gè)配置項(xiàng)，computed
- computed當(dāng)中，計(jì)算屬性由兩部分組成（key:{} == 屬性名，類型為對(duì)象）
computed:{ Calculate:{ }}
- 書(shū)寫(xiě)方式兩種，如果不需要對(duì)計(jì)算屬性進(jìn)行修改，那么可以舍棄set配置項(xiàng)的編寫(xiě)，從而將計(jì)算屬性寫(xiě)為函數(shù)形式，函數(shù)內(nèi)部的內(nèi)容代表的就是get配置項(xiàng)的內(nèi)容
- get配置項(xiàng)
- 該計(jì)算屬性被訪問(wèn)的時(shí)候調(diào)用，所依賴的數(shù)據(jù)被修改的時(shí)候，也會(huì)更新
- set配置項(xiàng)
- 當(dāng)計(jì)算屬性整體被修改的時(shí)候調(diào)用，因?yàn)橛?jì)算屬性依賴于其他屬性，所以修改的時(shí)候要修改計(jì)算屬性所依賴的屬性
computed:{ Calculate:{get(){},set(){} }}
- get配置項(xiàng)
當(dāng)所依賴的屬性發(fā)生修改的時(shí)候，計(jì)算屬性的get調(diào)用，而我們的模糊查詢，就在get當(dāng)中實(shí)現(xiàn)
在get當(dāng)中實(shí)現(xiàn)，那么就可以使用計(jì)算屬性的簡(jiǎn)寫(xiě)形式
業(yè)務(wù)實(shí)現(xiàn)
- 首先我們需要一個(gè)input框，在input框中，設(shè)置一個(gè)v-model雙向綁定（與data當(dāng)中的數(shù)據(jù)綁定）
- filePersons所依賴的數(shù)據(jù)就是 keyWords
- keyWords需要參與運(yùn)算
- 那剩下的結(jié)構(gòu)就很簡(jiǎn)單了，ul與li標(biāo)簽渲染數(shù)據(jù)
<!-- 創(chuàng)建一個(gè)容器 --><div class="app"><!-- 模糊查詢 --><input type="text" v-model="keyWords"><!-- 列表渲染 --><ul><li v-for="item in filterPersons" :key="item.id">{{item.name}} - {{item.age}} - {{item.sex}}</li></ul></div>js<script>const vm = new Vue({el: '.app',data: {name: 'wavesbright',keyWords:"",// 原始數(shù)據(jù)persons:[{id:1,name:'馬冬梅',age:18,sex:"女"},{id:2,name:"周冬雨",age:19,sex:"女"},{id:3,name:"周杰倫",age:20,sex:"男"},{id:4,name:"溫兆倫",age:21,sex:"男"},],},methods: {},// 計(jì)算屬性computed:{// key:{} == 屬性名，類型為對(duì)象filterPersons(){return this.persons.filter((item) => {return item.name.indexOf(this.keyWords) != -1})}}});</script>實(shí)現(xiàn)效果【17_Vue列表過(guò)濾_js模糊查詢】注意觀察 右邊數(shù)據(jù)的變化
經(jīng)驗(yàn)總結(jié)擴(kuò)展閱讀
- 8_vue是如何進(jìn)行數(shù)據(jù)代理的
- h函數(shù) vue3渲染函數(shù)的變化
- Filter Spring中過(guò)濾器和攔截器(Interceptor)的區(qū)別和聯(lián)系
- 從0搭建vue3組件庫(kù):自動(dòng)化發(fā)布、管理版本號(hào)、生成 changelog、tag
- 9_Vue事件修飾符
- 【vue2】Style和Class，條件，列表渲染，雙向數(shù)據(jù)綁定，事件處理
- 從0搭建vue3組件庫(kù): 如何完整搭建一個(gè)前端腳手架?
- 關(guān)于 Vue 中 h 函數(shù)的一些東西
- vue3中$attrs的變化與inheritAttrs的使用
- 7_vue的數(shù)據(jù)代理，雙向綁定