12、过滤器

1、过滤器概述

• 过滤器常用于文本的格式化， 常用在俩个地方：插值表达式 v-bind属性绑定
• 过滤器应被添加在JavaScript表达式的尾部，由“管道符”进行调用
• 过滤器中的形参是管道符前面的值
• 过滤器的本质是一个函数，并且有一个返回值

2、定义过滤器

• 可以在 filters 节点中定义过滤器

<!-- 2. 声明一个将要被vue控制的dom区域 -->
<div id="app">
    <!-- 由管道符调用capitalize过滤器，对message的值进行格式化 -->
    <p>{{ message | capitalize}}</p>
</div>
<!-- 1. 导入vue的库文件，在window的全局就有了vue这个构造函数 -->
<script src="lib/vue-2.6.12.js"></script>
<script>
    // 3. 创建vue实例对象
    const vm = new Vue({
    	el: '#app', //el: 指定当前vm实例要控制页面的哪个区域
    	// 指定model数据源
    	data: {
    		message: 'hello vue',
    	},
        //私有过滤器
    	filters: {
    		capitalize(str) {
    			return str.charAt(0).toUpperCase() + str.slice(1);
    		}
    	}
    })
</script>

3、私有过滤器和全局过滤器

• 在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。 如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器

<script>
    Vue.filter('capitalize', (str) => {
    	return str.charAt(0).toUpperCase() + str.slice(1);
    })
</script>

• 第一个参数：全局过滤器的名字
• 第二个参数：全局过滤器的‘处理函数’
• 当全局过滤器和私有过滤器名字冲突时，会根据就近原则调用私有过滤器

4、连续调用多个过滤器

​ 过滤器可以串联的进行调用

<!-- 2. 声明一个将要被vue控制的dom区域 -->
<div id="app">
	<!-- 由管道符调用capitalize过滤器，对message的值进行格式化 -->
	<p>{{ message | capitalize | maxLength}}</p>
</div>
<!-- 1. 导入vue的库文件，在window的全局就有了vue这个构造函数 -->
<script src="lib/vue-2.6.12.js"></script>
<script>
    Vue.filter('capitalize', (str) => {
    	return str.charAt(0).toUpperCase() + str.slice(1) + '~~~';
    })
    Vue.filter('maxLength', (str) => {
        if (str.length <= 10) {
        	return str + '~~~';
        } else {
        	return str + '===';
        }
    })
    // 3. 创建vue实例对象
    const vm = new Vue({
    	el: '#app', //el: 指定当前vm实例要控制页面的哪个区域
    	// 指定model数据源
    	data: {
    		message: 'hello vue',
    	},
    	filters: {
    		capitalize(str) {
    			return str.charAt(0).toUpperCase() + str.slice(1);
    		}
    	}
    })
</script>