文章目錄
- 前言
- 一、過濾器是什么？
- 二、定義過濾器
- 1.本地過濾器
- 2.全域過濾器
- 1.創建filters.js 檔案
- 2.注冊全域過濾器
- 三、使用
- 1.在{{ }}花括號中使用
- 2.在v-bind 運算式
- 3.串聯
- 4.接受額外引數
- 總結
前言
在實際的開發中，介面回傳的資料中通常包含了很多狀態，這些狀態的值通常都是以數字或者字符表示，比如：type : " 01 "，假設00代表未開始，01代表進行中，02代表已結束；
那么拿到介面的資料后，不想改變這個資料的值，只是顯示對應的文字；或者對這個資料進行處理之后再使用，這時就可以vue的過濾器
提示：以下是本篇文章正文內容，下面案例可供參考
一、過濾器是什么？
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化，
二、定義過濾器
1.本地過濾器
代碼如下（示例）：
這個示例是官網示例，這個過濾器的作用，將一個純字母字串的第一個字母變成大寫
在vue檔案中定義本地過濾器
data(){
message : 'tom'
},
filters :{
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
使用
{{ message | capitalize }}
結果：Tom
2.全域過濾器
1.創建filters.js 檔案
在src下創建一個filters檔案夾，并在下面創建一個js檔案filters.js
創建位置與名稱都可以隨便命名，不過為了顧名思義，最好還是叫filters
filters.js如下
export function type(val){
var value = ''
switch(val){
case '00':
value = '未開始'
break
case '01':
value = '進行中'
break
case '02':
value = '已結束'
break
}
return value
}
export function isEnd(val){
var value = ''
switch(val){
case '0000':
value = '是'
break
case '02':
value = '否'
break
}
return value
}
//還可以定義多個function，看自己需求
//..............
2.注冊全域過濾器
在main.js參考filters.js 一定要參考才生效
import * as filters from './filters/filters' //參考，相對路徑根據你創建的位置與名稱自行修改
console.log('filters------',filters)
//在Vue實體創建之前注冊全域過濾器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
//Vue實體
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
附上：過濾器官方檔案
Vue.filter(str, fun)方法
引數
- str----型別：string，過濾器的名稱
- fun—型別：Function，處理str的函式
用法
// 注冊
Vue.filter(‘my-filter’, function (value) {
// 回傳處理后的值
})
// getter，回傳已注冊的過濾器
var myFilter = Vue.filter(‘my-filter’)
三、使用
1.在{{ }}花括號中使用
在資料中添加兩個變數，實際開發中這兩個資料來源于介面，這里為了方便，直接給了一個初始值，效果是一樣的，data() {
return {
test1 : '01', //模擬介面資料
test2 : '02' //模擬介面資料
}
},
html模板中：
<div>{{test1 | orderType}}</div>
<div>{{test2 | isEnd}}</div>
test1的值是字串
|是Vue.js固定語法格式，管道標識，后面跟的就是過濾器
orderType和isEnd就是定義在filters.js中的過濾器的名字，
上述運算式的含義：|前的字串會被作為后面引數傳入到過濾器中，最后的回傳值會顯示在頁面中，
2.在v-bind 運算式
<div v-bind:id="test3 | orderType"></div>
3.串聯
{{ test | filterA | filterB}}
filterA與filterB定義為接收一個引數的過濾器
test作為引數傳入到filterA function中，這個函式的回傳值再作為引數，傳入filterB中，filterB的回傳值作為這個運算式的結果顯示在頁面中，
4.接受額外引數
{{ message | filterA(‘arg1’, arg2) }}
filterA 被定義為接收三個引數的過濾器函式，其中 message 的值作為第一個引數，普通字串 ‘arg1’ 作為第二個引數，運算式 arg2 的值作為第三個引數，
總結
以上就是今天要講的內容，本文簡單介紹了vue.js 過濾器的使用
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/174551.html
標籤：java
上一篇：uni-app 新手入門到精通2
下一篇：Vue router