上QQ阅读APP看书，第一时间看更新
3.2 Vue.js过滤器的使用
1.基础用法
Vue.js允许开发者自定义过滤器，用于常见的文本格式化，由“管道符”指示，格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接收表达式的值作为第一个参数。
以下实例将输入字符串的第一个字母转为大写。
具体步骤如下：
1）在Vue.js的data区域定义一个变量message，值是小写的拼音huangjuhua。
2）在过滤器filters代码块中，自定义大写方法capitalize，该方法将输入字符串的首字母转为大写。
3）普通显示{{message}}。
4）调用过滤器函数capitalize，如{{message|capitalize}}。
完整示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js中过滤器的使用</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
原始字符串：{{ message }}<br>
<!--使用过滤器capitalize将首字母大写-->
过滤后的字符串：{{ message | capitalize }}
</div>
<script>
//下面是Vue.js的代码块-开始
new Vue({
el: '#app',//app为前面div代码块的id的值，通过“#”绑定
//data区域定义属性的值
data: {
message: 'huangjuhua'
//后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
},
//下面是过滤器
filters: {
//自定义过滤器的处理函数
capitalize: function (value) {
if (!value) return ''
value = value.toString()
//返回处理后的字符串
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})//Vue.js的代码块-结束
</script>
</body>
</html>
效果如图3-16所示。
图3-16 使用过滤器的页面效果图
2.过滤器串联
我们可以同时使用多个过滤器，多个过滤器通过“1”关联在一起。
代码格式如下：
{{ message | filterA | filterB }}
过滤器是JavaScript函数，因此可以接收参数：
{{ message | filterA('arg1', arg2) }}
其中，message是第一个参数；字符串'arg1'将传给过滤器作为第二个参数；arg2表达式将被求值，然后传给过滤器作为第三个参数。