声明：本文转载自https://my.oschina.net/u/3563169/blog/1577690，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
自定义过滤器的关键字是 filter。
官网描述：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>官网中提到的 管道 的关键字是“|”，其格式是：{{ data | fun }}。
自定义过滤器的作用：在数据显示之前，对数据进行处理包装。过滤器也分为全局过滤器（filter）和局部过滤器(filters)。具体用法见代码及注释部分：
js代码部分：
window.onload = function (){ // 定义全局过滤器 Vue.filter("test",function(data){ // 形参data的实参是管道{{ data | fun }}中 data return data >=10; }); new Vue({ el:"#app", data:{ num:0, today:new Date() }, // 定义局部过滤器 filters:{ // 定义局部过滤器，将以为数字前补0，其他的原样输出 addZero:function(data){ return data>=10 ? data : "0"+data; }, // 过滤器带多个参数 dateFormat:function(data,arg1,arg2){ // 可以打印 arg1/arg2 看看结果 // console.log(arg1); // console.log(arg2); let year = data.getFullYear(); let m = data.getMonth()+1; let day = data.getDate(); return year+arg1+m+arg1+day; } } }); }html代码部分：
<body> <div id="app"> <input type="text" v-model="num"> <div>{{ num }}</div> <!-- 使用管道 {{ data | fun }} --> <p>通过全局过滤器 test 判断 num 是否 >=10</p> <div>{{ num | test }}</div> <hr/> <p>通过局部过滤器 addZero，将以为数字前补0，其他的原样输出</p> <div>{{ num | addZero }}</div> <hr/> <p> 管道前的参数永远都是过滤器方法的第一个参数，<br/> 过滤器方法括号中所定义的参数，以第二位参数开始向后顺序排列 </p> <div>{{ today | date-format("-","参数二") }}</div> </div> </body>
至此，完毕。感谢您的阅读。
比你牛逼的人还在努力，我们有什么理由选择安逸。
本文发表于2017年11月23日 10:33
(c)注：本文转载自https://my.oschina.net/u/3563169/blog/1577690，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 1757 讨论 0 喜欢 0
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
|
这世界真好，吃野东西也要留出这条命来看看 21:21 2021年03月14日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |