过滤器介绍
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
代码参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>价格: {{price | currency('¥',2)}}</h1>
<p>{{str | capital}}</p>
</div>
</body>
</html>
<script>
// 自定义全局过滤器,第二个参数是函数
// 全局过滤器，本过滤器功能：添加货币符号，保留两位小数
Vue.filter('currency', function (val, arg1, arg2) {
// 输出的结果为: |前面的数字
console.log(val, arg1, arg2);
// toFixed()方法可把 Number 四舍五入为指定小数位数的数字。
return arg1 + val.toFixed(arg2);
});
// 注册局部过滤器
new Vue({
el: '#app',
data: {
price: 12.345,
str: 'hello'
},
// 局部过滤器，本过滤器功能：实现字符的首字符大写
filters: {
capital: function (v) {
// 实现效果: 首字母大写
// 具体做法: 字符串下标为0的字符,转化为大写;从下标为1的位置开始截取,截取后面所有的字符;最后,进行拼接.
return v[0].toUpperCase() + v.slice(1);
}
}
});
</script>
效果图
