不二如是 发表于 2018-8-31 15:22:36

005 V 过滤器

本帖最后由 不二如是 于 2018-8-31 16:03 编辑

https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg

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

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

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

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

就拿上一节的时间：
https://xxx.ilovefishc.com/forum/201808/30/170109iv0yszqyyr98yxyv.gif

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

先修改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）



答案：
**** Hidden Message *****



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

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

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif

差点夹不住屁 发表于 2018-10-9 11:43:37

已学习,谢谢老板

Ruide 发表于 2020-4-8 11:10:49

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

优时风 发表于 2020-5-5 09:41:57

1

一笙彤 发表于 2020-6-18 11:05:56

0

suweixuan1998 发表于 2020-6-23 11:30:10

对数据进行过滤。
T

kmq116 发表于 2020-7-19 23:05:23

开始迷惑了

HanYanShuang 发表于 2022-3-18 20:59:37

学习

kykio 发表于 2024-1-22 11:17:51

围观
页: [1]
查看完整版本: 005 V 过滤器