005 V 过滤器

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了插值和表达式，本次来学习过滤器。

Vue支持在“{{}}”的尾部添加一个管道符"|"对数据进行过滤。

经常用于文本，比如字母全部大写，货币数字三位一个逗号分割等。

过滤的规则是自定义的，通过给Vue实例添加选项filters来设置。

就拿上一节的时间：

                               
登录/注册后可看大图

格式很诡异哈，我们通过过滤器对其进行格式化处理。

先修改div：

<div id="myA">{{time | formDate}}</div>

然后修改代码，新增一个变量：

 var newDate = function (value) {
        return value <10 ? '0' + value:value;
    }

修改Vue实例：

var app = new Vue({
        el: "#myA",
        data: {
            time: new Date()
        },
//        添加过滤
        filters:{
//            value就是要被过滤的值
            formDate:function(value){
                var date = new Date(value);
                var year = date.getFullYear();
                var month = newDate(date.getMonth()+1);
                var day = newDate(date.getDate());
                var hours = newDate(date.getHours());
                var minutes = newDate(date.getMinutes());
                var seconds = newDate(date.getSeconds());
//                见处理好的时间格式返回出去
                return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
            }
        },
        mounted: function(){
            var _this = this;
            this.timer = setInterval(function () {
                _this.time = new Date();
            }, 1000);
        },
        beforeDestroy: function () {
            if (this.timer) {
                clearInterval(this.timer);
            }
        }
    })

过滤器写法还可以串联：

{{msg|filter1|filter2}}

还可以接受参数：

{{msg|filter('arg','arg1')}}

过滤器应用用于处理简单的文本格式，如果要实现更复杂的会用到后续我们要介绍到的“计算属性”。

---

课后作业


1、过滤器用来干什么？

2、过滤器可以串联写多个过滤条件吗？（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

差点夹不住屁

已学习,谢谢老板

Ruide

处理简单的文本格式数据
T

优时风

1

一笙彤

0

suweixuan1998

对数据进行过滤。
T

kmq116

开始迷惑了

HanYanShuang

学习

kykio

围观