过滤器基本语法
Vue.filter( id, [definition] )[1]
-
「参数」：
-
{string} id -
{Function} [definition] -
「用法」：
注册或获取全局过滤器。
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
过滤器的官网介绍
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：「双花括号插值」和 「v-bind 表达式」 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
当全局过滤器和局部过滤器重名时，会采用局部过滤器。
下面首先以官网将小写字母转为大写字母的实例，提供源码进行逐步说明。后续还会继续提供几个实例：
-
使用过滤器字符串替换拼接实例 -
使用过滤器进行时间格式转化实例
实例：将第一个小写字母转为大写字母的实例 capitalize
1. 局部过滤器定义的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.定义一个输入框，使用 v-model 绑定输入值为 msg -->
<input type="text" v-model="msg">
<!-- 2.设置p便签渲染 msg 的数据，也就是说当输入框填写信息，那么p标签则会同步渲染出来 -->
<p>{{ msg | capitalize }}</p>
</div>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
msg: "" // 定义用来传递数据的msg
},
methods: {},
filters:{ // 定义局部过滤器
// 定义小写字符转为大写字母的过滤器
capitalize(value){
if (!value) return ''; // 当传入的value为null，则返回空字符串
value = value.toString(); // 将传入的value转为String类型
return value.charAt(0).toUpperCase() + value.slice(1) // 将字符串的第一个字母转为大写，后面的字符串拼接上
}
}
})
</script>
</body>
</html>
浏览器执行如下：
2. 定义全局过滤器的方式
// 3. 定义一个全局过滤器，覆盖局部过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''; // 当传入的value为null，则返回空字符串
value = value.toString(); // 将传入的value转为String类型
// 将字符串的第一个和第二个字母转为大写，后面的字符串拼接上
return value.charAt(0).toUpperCase() + value.charAt(1).toUpperCase() + value.slice(2) + '全局过滤器'
})
因为当全局过滤器和局部过滤器重名时，会采用局部过滤器。所以，先将上面的局部过滤器注释，看看效果，如下：
3. 确认当全局过滤器和局部过滤器重名时，会采用局部过滤器
浏览器显示如下：
过滤器可以串联：
{{ message | filterA | filterB }}
在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
下面在编写一个局部过滤器，将其中a字符使用replace(正则，替换字符串) 替换为b。
// 替换字符a为b的过滤器
replace_str(value){
return value.replace(/a/g, 'b') // 斜杠内为正则内容，g代表全局替换
}
下面使用串联过滤器，将起码过滤的数据继续替换，如下：
浏览器显示如下：
过滤器是 JavaScript 函数，因此可以接收参数：
{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。
上面的替换字符过滤器中只能将a替换为字母b，下面设置传入参数，将其根据参数进行替换。
// 根据参数替换字符a的过滤器
replace_str(value, arg1, arg2){
return value.replace(/a/g, arg1 + arg2) // 斜杠内为正则内容，g代表全局替换
}
下面在使用过滤器的位置传入参数：
<!-- 2.设置p便签渲染 msg 的数据，也就是说当输入框填写信息，那么p标签则会同步渲染出来 -->
<p>{{ msg | capitalize | replace_str('c','d') }}</p>
浏览器显示如下：
可以从浏览器中看出，一个字符a被替换为cd了。
Reference
Vue.filter( id, [definition] ): https://cn.vuejs.org/v2/api/#Vue-filter
交流QQ群：
点击下面，查看更多Vue系列文章
原文始发于微信公众号（海洋的渔夫）：15. Vue 过滤器的基本使用 – 头字母大小写转换、字符串拼接
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/32018.html
