vue自定義過濾器的建立和使用

一、簡單介紹

 

過濾器的做用：實現數據的篩選、過濾、格式化。

 

過濾器的本質是一個有參數，有返回值的方法。

 

過濾器能夠用在兩個地方：雙花括號插值和v-bind表達式（後者從2.1.0+開始支持）。其中’管道’符號後面的是過濾器，前面的是須要格式化的值。

 

<!-- 在雙花括號中 -->
{{ message | capitalize }}
 
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

 

vue1.*版本是有內置的過濾器，可是vue2.*全部版本都已經沒有自帶的過濾器了。

 

二、建立和使用

 

組件（局部）過濾器：

methods: {...},
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
},
watch: {...}

 

全局過濾器（1）：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
 
new Vue({
  // ...
})

 

全局過濾器（2）：

將全部方法定義在一個文件裏面導出：/src/api/filters.js

// 第一個參數都是默認傳入的值，第二開始都是手動傳入的參數
const test1 = val => {
return val * 2
}
 
const test2 = (val, num = 0) => {
return val * num
}
 
export { test1, test2 }

 

而後在入口文件main.js中引入：

import * as filters from './api/filters'
 
Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))

 

而後再須要的頁面使用：

<template>
<div>
<h1>測試filters</h1>
<p>{{ num | test1 }}</p>
<p>{{ num | test2 }}</p>
<p>{{ num | test2(3) }}</p>
<div v-bind:id="num | test2(4)">111111111</div>
</div>
</template>
<script>
export default {
data () {
return {
num: 2
}
}
}
</script>

 

效果以下：