Vue 过滤器Filter的使用

1 用处

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

注意 过滤器应该用在 表达式的尾部。

错误写法：{{ (EndTime|formatDate) || '2020-02-02' }}
报错：

2 用法

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

<!-- 插值 -->
{{ message | capitalize }}

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

3 示例

3.1 全局过滤器，局部过滤器

代码：

<p>{{message | filter1}}</p>
<br>
<p>{{message | filter2 }}</p>


		// 全局过滤器
        Vue.filter('filter1', function(msg){
            return msg + '-全局过滤器filter1'
        });

		var vm=new Vue({
           el:'#app',
           data:{
               message: '过滤器',
           },
           methods:{},
           // 局部过滤器
           filters: {
               filter2(msg) {
                   return msg + '-局部过滤器filter2'
               }
           }
        });

结果：

3.2 带参数过滤器

代码：

<p>{{message | filter4('参数1', '参数2') }}</p>
var vm=new Vue({
   el:'#app',
   data:{
       message: '过滤器',
   },
   methods:{},
   // 局部过滤器
   filters: {
       filter4(msg, arg1, arg2) {
           return msg + '-局部过滤器filter4 - 带参数:' + arg1 + ',' + arg2
       }
   }
});

结果：

4 注意事项

当全局过滤器和局部过滤器重名时，会采用局部过滤器。
代码：

		<p>{{message | filter3 }}</p>
		Vue.filter('filter3', function(msg){
		     return msg + '-全局过滤器filter3'
		 });
 		var vm=new Vue({
           el:'#app',
           data:{
               message: '过滤器',
           },
           methods:{},
           // 局部过滤器
           filters: {
               filter3(msg) {
                   return msg + '-局部过滤器filter3'
               }
           }
        });

结果：