vue过滤器 | 管道

过滤器，是一个有参数，有返回值的方法。

其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。

例： uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器

过滤器可以用在两个地方：双花括号插值和v-bind表达式。

过滤器应该被添加在JavaScript表达式的尾部，由“管道” | 符号指示：

• 全局 ：范围大，如果出现同名时，权利小

• 组件内: 如果出现同名时，权利大，范围小

<!-- 在双花括号中 -->
{{ 22 | add }} // 局部过滤器
{{ 22 | addAll }} // 全局过滤器

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

局部过滤器：filters:跟data,methods在同一层
export default {
 filters：{ // 定义过滤器
     add (value) { // 这里的value就是 message
        return value += 1
     }
 },
 data () {}
}

全局过滤器：在创建Vue实例前定义全局过滤器
import Vue from 'vue'
Vue.filter('addAll', function (val) {
  return value += 3
})
new Vue({
  // ...
})

 

全局过滤器与局部组件过滤器 参考：https://blog.csdn.net/badmoonc/article/details/81485803

一个/多个过滤器/过滤器传参 参考：https://blog.csdn.net/liuxing393724034/article/details/83624882

抽离过滤器，定义到当个文件中 参考：https://www.jianshu.com/p/6ead0ed825da