过滤器
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用 示例代码如下：
<!-- 在双花括号中通过"管道符"调用 函数（capitalize）过滤器，对值（message）进行格式化 -->
<p>{{message | capitalize}}</p>
<!-- 在v-bind中通过"管道符"调用 函数（capitalize）过滤器，对值（message）进行格式化 -->
<div> :id='message | capitalize'</div>
定义过滤器
在创建vue 实例期间，可以在filters 节点中定义过滤器，示例代码如下：
<body>
<div id="app">
<p>message 的值是：{{ message | capi }}</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
// 过滤器函数，必须被定义到 filters 节点之下
// 过滤器本质上是函数
filters: {
// 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
capi(val) {
// 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
// val.charAt(0)
const first = val.charAt(0).toUpperCase()
// 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
const other = val.slice(1)
// 强调：过滤器中，一定要有一个返回值
return first + other
}
}
})
</script>
</body>
私有过滤器和全局过滤器
在filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm 实例所控制的el 区域内使用。
如果希望在多个vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
// 使用 Vue.filter() 定义全局过滤器
Vue.filter('capi', function (str) {
const first = str.charAt(0).toUpperCase()
const other = str.slice(1)
return first + other + '~~~'
})
连续调用多个过滤器
过滤器可以串联地进行调用，例如:
<div id="app">
<p>message 的值是：{{ message | capitalize | maxLength}}</p>
</div>
<script>
// 全局过滤器 首字母大写
Vue.filter('capitalize', function (str) {
const first = str.charAt(0).toUpperCase()
const other = str.slice(1)
return first + other
})
// 全局过滤器 控制文本的最大长度
Vue.filter('maxLength', function (str) {
if(str.length<=10) return str
return str.slice(0,11)+'...'
})
- 把 message 的值，交给capitalize 进行处理
- 把 capitalize 处理的结果，再交给 maxLength进行处理
- ......
- 最终把 filterN 处理的结果，作为最终的值渲染到页面上
过滤器的注意点
- 要定义到 filters 节点下，本质是一个函数
- 在过滤器函数中，一定要有 return 值
- 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
- 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“
