Vue.js常见的选项属性——过滤器filter

本文链接：https://blog.csdn.net/weixin_48683341/article/details/118529595

Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。

语法：用法 {{str | filterName}}

要过滤的内容会作为 filterName() 参数，filterName()的返回值就是在页面要渲染的内容

过滤器分为全局过滤器和局部过滤器，全局注册时是filter，没有s的。而局部过滤器是filters，是有s的。

1. 全局过滤器filter

全局过滤器注册号之后所有的组件可以使用

<div id="app">
    <input type="text" v-model='msg'>
      <!-- upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中 -->
    <div>{{msg | upper}}</div>
    <!--  
      支持级联操作
      upper  被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
	  然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 的结果传递到lower中
 	-->
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>测试数据</div>
  </div>

<script type="text/javascript">
  //  lower  为全局过滤器     
  Vue.filter('lower', function(val) {
    return val.charAt(0).toLowerCase() + val.slice(1);
  });
</script>

2. 局部过滤器filters

局部过滤器注册好之后只能在注册的组件内使用

var vm = new Vue({
  el: '#app',
  data: {
    msg: ''
  },
  //filters  属性 定义 和 data 已经 methods 平级 
  //  定义filters 中的过滤器为局部过滤器 
  filters: {
    //   upper  自定义的过滤器名字 
    //    upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中
    upper: function(val) {
      //  过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
      return val.charAt(0).toUpperCase() + val.slice(1);
    }
  }
});

3. 过滤器的串联

过滤器可以串联使用，在此处是将filter1的值作为filter2的参数。

语法：{{ data|filter1|filter2 }}

第一个过滤器的返回值，会作为第二个过滤器的参数传入。

<body>
		<div id="app">
			原数据：{{str}}<br>
			过滤后：{{str | f1 | f2}}
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					str: '2021-7-6',
				},
				filters: {
					f1(s){
						console.log(s)
						let arr = s.split('-')
						return `${arr[0]}年${arr[1]}月${arr[2]}日`
					},
					f2(s){
						console.log(s)
						let arr = s.split('')
						return `${arr[0]}${arr[1]}${arr[2]}${arr[3]}年`
					}
				}
			})
		</script>
	</body>

第一次过滤为：2021年7月6日。

串联后第二次过滤为：2021年。