过滤器filter
<!DOCTYPE html>
<html lang="en">
<!-- 过滤器,是一个函数,定义到 filters 节点下，且一定要有return
如果全局过滤器和私有过滤器名字一致，此时按照“**就近原则**”，调用的是”私有过滤器“ -->
<!-- 过滤器是可以连续调用的,可传参 {{ message | capi| capi1(arg1,arg2)| capi2 }}-->
<!-- 含参数的全局过滤器的定义-->
<!-- Vue.filter('filterA',(msg,arg1,arg2) =>{
这里是过滤器的代码逻辑
}) -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>message 的值是：{{ message | capi }}</p>
</div>
<div id="app2">
<p>message 的值是：{{ message | capi }}</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 定义全局过滤器.Vue.filter(filter_name,function()) ,要在Vue实例之前
// 定义全局过滤器,第一个是过滤器的名字要用上' ';,第二个是过滤器的功能
Vue.filter('capi', function (str) {
const first = str.charAt(0).toUpperCase()
const other = str.slice(1)
return first + other + ' 这是全局过滤器调用的结果'
})
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
// 这是一个私有过滤器,因为在Vue实例的内部
filters: {
// 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
capi(val) {
// 字符串的charAt 方法，获取索引值对应的字符,val.charAt(0)即首字母
// val.charAt(0)
const first = val.charAt(0).toUpperCase()
// 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
const other = val.slice(1)
// 强调：过滤器中，一定要有一个返回值
return first + other + ' 这是私有过滤器调用的结果'
}
}
})
const vm2 = new Vue({
el: '#app2',
data: {
message: 'heima'
}
})
</script>
</body>
</html>
结果
message 的值是：Hello vue.js 这是私有过滤器调用的结果
message 的值是：Heima 这是全局过滤器调用的结果