过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}
2.使用过滤器: {{ xxx|过滤器名}}或v-bind:属性 ="xxx|过滤器名”

备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>vue时间过滤器</title>

        <!-- 引用vue文件 -->

        <script type="text/javascript" src="../study01/js/vue.js"></script>

        <!-- Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样.  -->

        <script type="text/javascript" src="../study01/js/dayjs.min.js"></script>

        <!--

            Day.js 有很多 API 来解析、处理、校验、增减、展示时间和日期

            dayjs('2018-08-08') // 解析

            dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 展示

            dayjs()

            .set('month', 3)

            .month() // 获取

            dayjs().add(1, 'year') // 处理

            dayjs().isBefore(dayjs()) // 查询 -->

    </head>

    <body>

        <div id="root">

            <h1>过滤后的时间格式</h1>

            <!-- 计算属性实现 -->

            <h3>现在是:{{fmtTime}}</h3>

            <!-- methods  实现 -->

            <h3>现在是:{{getFmtTime()}}</h3>

             <!-- 过滤器  实现   | 管道符-->

             <h3>现在是:{{time | timeFmatetr}}</h3>

             <!-- 过滤器传参 -->

             <h3>现在是:{{time | timeFmatetr('YYYY_MM_DD') | myCos}}</h3>

           </div>

           <!-- 第二个容器  div -->

           <div id="root2">

               <p>{{msjtext | myCos}}</p>

           </div>

        <script type="text/javascript">

            Vue.config.productionTip=false;//阻止运行时提示开发版本

            //全局过滤器  关键词 filter

            Vue.filter('myCos',function(value){

                return value.slice(0,4)//截取前四位

                }

            )

              new Vue({

                el:"#root",

                data:{

                    time:1637559917972   //时间戳

                },

                //计算属性

                computed:{

                fmtTime(){

                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')

              }

             },

             methods: {

                getFmtTime(){

                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')

                }

             },

             //局部过滤器  用关键词：filters

             filters:{

                timeFmatetr(value,str='YYYY年MM月DD日 HH:mm:ss'){

                    return dayjs(value).format(str)

                },

                // myCos(value){

                //     return value.slice(0,2)//截取前四位

                // }

             }

         })

        //  第二个vue 实例’

    new Vue({

        el:'#root2',

        data:{

            msjtext:'wdgrvword'

        }

    })

        </script>

    </body>

  </html>

　　

vue 时间过滤器的更多相关文章

  1. VUE过滤器的使用 vue 时间格式化

    过滤器介绍 官方教程地址:https://cn.vuejs.org/v2/guide/filters.html 过滤器常被用于一些文本格式化 我们可以自定义过滤器,可以实现各种各样的功能. vue时间 ...

  2. vue的过滤器

    Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...

  3. Vue2.0如何自定义时间过滤器

    我们知道Vue2.0开始不再支持自带的过滤器,需要我们自己去自定义过滤器,方法如下:           我们可以自己定义一个时间过滤器,在此引用了一个日期处理类库(Moment.js)可以很快的实现 ...

  4. VUE：过滤器及日期格式化moment库

    VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  5. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  6. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  7. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  8. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  9. vue 时间选择器组件

    vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...

随机推荐

  1. Java 中的 final 关键字有哪些用法？

    修饰类:表示该类不能被继承: 修饰方法:表示方法不能被重写: 修饰变量:表示变量只能一次赋值以后值不能被修改(常量).

  2. java-file类 hei

    File类 /* java.io.File类 文件和目录轮径的抽象形式 java把电脑种的文件和文件夹,封装为一个file类,我们可以使用file类对文件和文件夹进行曹祖 使用File类的方法 创建一 ...

  3. JPA、JTA、XA相关索引

    JPA和分布式事务简介:https://www.cnblogs.com/onlywujun/p/4784233.html JPA.JTA与JMS区别:https://www.cnblogs.com/y ...

  4. Eclipse创建Spring XML配置文件插件

    引用:https://www.cnblogs.com/lideqiang/p/9067219.html 第一步:在 Eclipse Marketplace仓库中,搜索sts 第二步:安装Spring ...

  5. 如何获取所有的参数名和参数值？用request.getParameterNames(); Enumeration enu=request.getParameterNames(); while(enu.hasMoreElements()){ String paraName=(String)enu.nextElement(); System.out.println(paraName+"

    用request.getParameterNames();  Enumeration enu=request.getParameterNames();  while(enu.hasMoreElemen ...

  6. Spring 的 jdbcTemplate 操作

    1.Spring框架是一站式框架 (1)针对 JavaEE 三层,每一层都有解决技术 (2)在 dao 层,使用 jdbcTemplate 2.Spring对不同的持久化层的技术都进行了封装 (1)j ...

  7. 什么是arduino及.arduino分类

    关于什么是arduino没有什么可说的,想要接触arduino多多少少的都会对arduino有一定的理解,我认为,arduino应该算是一个连接硬件与软件的平台,通过他,你可以将你的想法以代码的形式呈 ...

  8. 制作任意波形发生器MAX038

  9. 顺利通过EMC实验（1）

  10. 记一个ios滚动穿透问题

    直接上代码 <body style="overflow: hidden;-webkit-overflow-scrolling: touch;"> <div id= ...