过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
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 中有几种方法可以实现一个线程？

    继承 Thread 类 实现 Runnable 接口 实现 Callable 接口,需要实现的是 call() 方法

  2. 学习FastDfs（三）

    FASTDFS是什么 FastDFS是由国人余庆所开发,其项目地址:https://github.com/happyfish100 FastDFS是一个轻量级的开源分布式文件系统,主要解决了大容量的文 ...

  3. 学习SVN02

    代码发布方案: 1,安装,优化 软件环境,(nginx,lvs)  <-------运维工程师 2,程序代码(不断更新).   <--------开发工程师,(开发,运维都可以发布) 3, ...

  4. 数据结构：DHUOJ 单链表ADT模板应用算法设计：长整数加法运算（使用单链表存储计算结果）

    单链表ADT模板应用算法设计:长整数加法运算(使用单链表存储计算结果) 时间限制: 1S类别: DS:线性表->线性表应用 题目描述: 输入范例: -5345646757684654765867 ...

  5. python学习笔记（十）——进程间通信

    python 在进程间通信时有很多方式,比如使用Queue的消息队列,使用 pip的管道通信,share memory 共享内存或 semaphore 信号量等通信方式. 这里我们演示一下通过消息队列 ...

  6. 总结一下各种0.5px的线

    在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉.用普通写法border:solid 0.5px red;iPhone可以正常显示,android ...

  7. javaweb之修改功能

    数据库的修改功能,主要是通过查询,保留之前的数据,得到当前想要修改的页面,并进行修改. 一.dao层 在dao层需要添加两个fangfa,一个查询,一个修改(这是整个dao层,包括之前的增删.浏览) ...

  8. uni-app中实现左侧导航栏效果

    HTML: 1 <view class="list"> 2 <!-- 一级 --> 3 <scroll-view class="list-l ...

  9. ES 架构及基础 - 1

    Elasticsearch 是一款分布式,RESTful 风格的搜索和数据分析引擎,可以从海量的数据中高效的找到相关信息.如 wiki 用 ES 进行全文检索及其高亮,Github 用其检索代码,电商 ...

  10. Java 值传递 or 引用传递？

    Java 方法传参 值传递 or 引用传递? 结论:Java采用的是值传递 先建立一些基础的概念 什么是值传递和引用传递? 值传递(pass by value):是指在调用函数时将实际参数复制一份传递 ...