Vue的過濾器你真了解嗎
1. 過濾器
1.1 對過濾器的理解
定義:對要顯示的數(shù)據(jù)進(jìn)行特定格式化后在顯示
適用:做一些簡單的邏輯處理
特點(diǎn):濾器可以做一些簡單操作,并且沒有改變原來的數(shù)據(jù),產(chǎn)生新的對應(yīng)的數(shù)據(jù)
? 1. 語法 : data | 過濾器
? 不傳參數(shù)默認(rèn)將data值傳入,并且自動調(diào)用函數(shù),函數(shù)可接收到value
? 傳參數(shù)并不會覆蓋掉第一個(gè)參數(shù),第一個(gè)參數(shù)默認(rèn)是value,第二個(gè)參數(shù)才是 傳入的參數(shù)
? 2. 濾器可以以串聯(lián)的形式
? data | 過濾器 | 過濾器
? 執(zhí)行的順序是將data當(dāng)做參數(shù)傳入到第一個(gè)過濾器中,第一個(gè)過濾器處理完,返回的
? 值作為第二個(gè)過濾器的參數(shù)
1.2 全局過濾器:
Vue.filter(filterName, function(value){ return value.slice(0, 4); }) new Vue({ . .. ... })
1.3 局部過濾器:
new Vue{ filters:{ filterName(value){ return value.slice(0, 4); } } }
在html中使用過濾器
<div>{{ handledata | filtername }}</div> <div>{{ handledata | filtername(參數(shù)) }}</div>
1.4 過濾器的案例
<div id="root"> <h3>methods寫的:{{time()}}</h3> <h3>computed寫的:{{time1}}</h3> <h3>過濾器的寫的:{{number | ftime("YYYY-MM-DD HH:mm:ss") | qjtime}}</h3> </div> <div id="root2"> <hr> <h3>{{name | qjtime}}</h3> </div> <script> Vue.config.productionTip = false // 全局過濾器 Vue.filter('qjtime', function (val) { return val.slice(0, 4) }) let vm = new Vue({ el: '#root', data: { number: Date.now() }, methods: { time() { return dayjs(this.number).format("YYYY年MM月DD日 HH:mm:ss") } }, computed: { time1: { get() { return dayjs(this.number).format("YYYY年MM月DD日 HH:mm:ss") } } }, // 局部過濾器 filters: { // 這是ES的語法表示如果有傳參數(shù)就使用傳進(jìn)來的參數(shù),如果沒有傳參就使用 ftime(val, str = "YYYY年MM月DD日 HH:mm:ss") { return dayjs(val).format(str) }, } }) new Vue({ el: "#root2", data: { number: Date.now(), name: '我是第二個(gè)Vue' } }) </script>
總結(jié)
以上就是今天要講的內(nèi)容,本文介紹了對過濾器的一些相關(guān)知識,希望對大家有所幫助!
相關(guān)文章
手把手帶你使用vue+node作后端連接數(shù)據(jù)庫
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫進(jìn)行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下2023-03-03解決Vue 移動端點(diǎn)擊出現(xiàn)300毫秒延遲的問題
這篇文章主要介紹了解決Vue 移動端點(diǎn)擊出現(xiàn)300毫秒延遲的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue源碼學(xué)習(xí)之Object.defineProperty 對數(shù)組監(jiān)聽
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty 對數(shù)組監(jiān)聽,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的方法
之前做項(xiàng)目的時(shí)候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-03-03詳解vuex結(jié)合localstorage動態(tài)監(jiān)聽storage的變化
這篇文章主要介紹了詳解vuex結(jié)合localstorage動態(tài)監(jiān)聽storage的變化,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05關(guān)于element中對el-input 自定義驗(yàn)證規(guī)則
這篇文章主要介紹了關(guān)于element中對el-input 自定義驗(yàn)證規(guī)則,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08