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

1、簡單介紹

 

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

 

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

 

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

 

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

 

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

 

2、創建和使用

 

組件（局部）過濾器：

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>

 

效果如下：