本篇內(nèi)容介紹了“Vue過(guò)濾器實(shí)現(xiàn)及應(yīng)用場(chǎng)景是什么”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)甕安,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108
Vue.js 允許你自定義過(guò)濾器(filter),可被用于一些常見(jiàn)的文本格式化。
過(guò)濾器可以用在兩個(gè)地方:雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開(kāi)始支持)。
過(guò)濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部,由“管道”符號(hào)指示:
<!-- 在雙花括號(hào)中 --> {{ message | filter }} <!-- 在 `v-bind` 中 --> <div v-bind:msg="message | filter"></div>
過(guò)濾器函數(shù)總接收表達(dá)式的值作為第一個(gè)參數(shù)。
在上述例子中,filter 過(guò)濾器函數(shù)將會(huì)收到 message 的值作為第一個(gè)參數(shù)。
1.1 過(guò)濾器可以串聯(lián)
{{ message | filterA | filterB }}
在這個(gè)例子中,filterA 被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù),表達(dá)式 message 的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù) filterB,將 filterA 的結(jié)果傳遞到 filterB 中。
1.2 過(guò)濾器是 JavaScript 函數(shù)可以接收參數(shù)
{{ message | filterA('arg1', arg2) }}
filterA 被定義為接收三個(gè)參數(shù)的過(guò)濾器函數(shù)。其中 message 的值作為第一個(gè)參數(shù),普通字符串 'arg1' 作為第二個(gè)參數(shù),表達(dá)式 arg2 的值作為第三個(gè)參數(shù)。
語(yǔ)法:Vue.filter( filterName,( ) => { return // 數(shù)據(jù)處理結(jié)果 } )
eg:
<div id="app"> <h4>{{userName | addName}}</h4> </div> <script> // 參數(shù)一:是過(guò)濾器的名字,也就是管道符后邊的處理函數(shù); // 參數(shù)二:處理函數(shù),處理函數(shù)的參數(shù)同上 Vue.filter("addName",(value)=>{ return "my name is" + value }) let vm = new Vue({ el:"#app", data:{ userName:"小明" } }) </script>
2.1 實(shí)際開(kāi)發(fā)使用
全局過(guò)濾器經(jīng)常會(huì)被在數(shù)據(jù)修飾上,通常我們把處理函數(shù)給抽離出去,統(tǒng)一放在一個(gè).js文件中。
// filter.js 文件 let filterPrice = (value) => { return '已收款' + value + '元' } let filterDate = (value) => { return value + '天' } export default {filterPrice,filterDate}
在main.js中 導(dǎo)入 上邊 filter.js文件 ,也可以在任何組件中導(dǎo)入 filter.js這個(gè)文件,但對(duì)于全局過(guò)濾器來(lái)說(shuō),最好是在main.js中定義,導(dǎo)入的是一個(gè)對(duì)象,所以使用Object.keys()方法,得到一個(gè)由key組成的數(shù)組,遍歷數(shù)據(jù),讓key作為全局過(guò)濾器的名字,后邊的是key對(duì)應(yīng)的處理函數(shù),這樣在任何一個(gè)組件中都可以使用全局過(guò)濾器了:
//main.js //下邊是2種導(dǎo)入方式,推薦第一種 import * as filters from './utils/filter/filter' // import {filterPrice,filterDate} from './utils/filter/filter' console.log(filters) Object.keys(filters.default).forEach((item)=>{ Vue.filter(item,filters.default[item]) }) new Vue({ router, store, render: h => h(App), }).$mount('#app')
// test.vue <template> <div> <input type="text" v-model="filterCount" > <div>{{filterCount | filterPrice}}</div> <div>{{filterCount | filterDate}}</div> </div> </template> <script> export default { data(){ return { filterCount:1500 } }, } </script>
// test.vue <template> <div> <input type="text" v-model="filterCount" > <div>{{filterCount | filterPrice}}</div> <div>{{filterCount | filterDate}}</div> </div> </template> <script> export default { data(){ return { filterCount:1500 } }, } </script>
4.1 格式日期(時(shí)間)
場(chǎng)景一:后端傳的時(shí)間:2019-11-19T04:32:46Z
安裝moment.js
// main.js import moment from 'moment' // 定義全局過(guò)濾器--時(shí)間格式化 Vue.filter('format',function(val,arg){ if(!val) return; val = val.toString() return moment(val).format(arg) })
// test.vue <template> <div class="filter">{{time | format('YYYY-MM-DD HH:MM:SS')}}</div> </template> <script> export default { data(){ return { time:'2019-11-19T04:32:46Z' } } } </script>
“Vue過(guò)濾器實(shí)現(xiàn)及應(yīng)用場(chǎng)景是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
文章題目:Vue過(guò)濾器實(shí)現(xiàn)及應(yīng)用場(chǎng)景是什么
新聞來(lái)源:http://bm7419.com/article30/phddso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、域名注冊(cè)、App設(shè)計(jì)、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)