Vue過濾器(filter)實現及應用場景詳解
1. 簡單介紹
Vue.js 允許你自定義過濾器(filter),可被用於一些常見的文本格式化。
過濾器可以用在兩個地方:雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。
過濾器應該被添加在 JavaScript 表達式的尾部,由“管道”符號指示:
<!-- 在雙花括號中 --> {{ message | filter }} <!-- 在 `v-bind` 中 --> <div v-bind:msg="message | filter"></div>
過濾器函數總接收表達式的值作為第一個參數。
在上述例子中,filter 過濾器函數將會收到 message 的值作為第一個參數。
1.1 過濾器可以串聯
{{ message | filterA | filterB }}
在這個例子中,filterA 被定義為接收單個參數的過濾器函數,表達式 message 的值將作為參數傳入到函數中。然後繼續調用同樣被定義為接收單個參數的過濾器函數 filterB,將 filterA 的結果傳遞到 filterB 中。
1.2 過濾器是 JavaScript 函數可以接收參數
{{ message | filterA('arg1', arg2) }}
filterA 被定義為接收三個參數的過濾器函數。其中 message 的值作為第一個參數,普通字符串 ‘arg1’ 作為第二個參數,表達式 arg2 的值作為第三個參數。
2. vue-cli中定義全局過濾器
語法:Vue.filter( filterName,( ) => { return // 數據處理結果 } )
eg:
<div id="app"> <h3>{{userName | addName}}</h3> </div> <script> // 參數一:是過濾器的名字,也就是管道符後邊的處理函數; // 參數二:處理函數,處理函數的參數同上 Vue.filter("addName",(value)=>{ return "my name is" + value }) let vm = new Vue({ el:"#app", data:{ userName:"小明" } }) </script>
2.1 實際開發使用
全局過濾器經常會被在數據修飾上,通常我們把處理函數給抽離出去,統一放在一個.js文件中。
// filter.js 文件 let filterPrice = (value) => { return '已收款' + value + '元' } let filterDate = (value) => { return value + '天' } export default {filterPrice,filterDate}
在main.js中 導入 上邊 filter.js文件 ,也可以在任何組件中導入 filter.js這個文件,但對於全局過濾器來說,最好是在main.js中定義,導入的是一個對象,所以使用Object.keys()方法,得到一個由key組成的數組,遍歷數據,讓key作為全局過濾器的名字,後邊的是key對應的處理函數,這樣在任何一個組件中都可以使用全局過濾器瞭:
//main.js //下邊是2種導入方式,推薦第一種 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')
3. 在組件中使用 全局過濾器:
// 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>
3. vue-cli中定義局部過濾器
// 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. 常見使用場景
4.1 格式日期(時間)
場景一:後端傳的時間:2019-11-19T04:32:46Z
安裝moment.js
// main.js import moment from 'moment' // 定義全局過濾器--時間格式化 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過濾器(filter)實現及應用場景的文章就介紹到這瞭,更多相關Vue過濾器(filter)實現應用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解Vue的數據及事件綁定和filter過濾器
- vue 過濾器和自定義指令的使用
- 關於Vue中過濾器的必懂小知識
- 解決vue過濾器filters獲取不到this對象的問題
- vue中父子組件的參數傳遞和應用示例