---

前言

在實際的開發中，介面返回的資料中通常包含了很多狀態，這些狀態的值通常都是以數位或者字元表示，比如：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 過濾器的使用