过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
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. myisamchk 是用来做什么的？

    它用来压缩 MyISAM 表,这减少了磁盘或内存使用. MyISAM Static 和 MyISAM Dynamic 有什么区别? 在 MyISAM Static 上的所有字段有固定宽度.动态 MyI ...

  2. Oracle入门基础（四）一一多行函数

    SQL> --工资总额 SQL> select sum(sal) from emp; SUM(SAL) 29025 SQL> --人数 SQL> select count(*) ...

  3. 什么是 ThreadLocal 变量？

    ThreadLocal 是 Java 里一种特殊的变量.每个线程都有一个 ThreadLocal 就是每 个线程都拥有了自己独立的一个变量,竞争条件被彻底消除了.它是为创建代价 高昂的对象获取线程安全 ...

  4. memcached 是如何做身份验证的？

    没有身份认证机制!memcached 是运行在应用下层的软件(身份验证应该是应用 上层的职责).memcached 的客户端和服务器端之所以是轻量级的,部分原因就 是完全没有实现身份验证机制.这样,m ...

  5. spring-boot-learning-MongoDB

    NoSQL可以极大提高互联网系统的性能,但是它有一些致命的缺陷,其中最为严重的就是计算功能卡分有限,例如,在一个10 万数据量的List 中,我只需要满足特定条件的元素在Red is 中,使用集合或者 ...

  6. JavaScript 焦点事件

    焦点事件,当一个元素(比如链接或表单)得到或失去焦点时发生. 实例: 1 <!DOCTYPE html> 2 <html lang="en"> 3 < ...

  7. js获取一周前日期

    项目中需要设定默认开始时间为一周前,结束时间为现在,现在写一下如何用js获取一周前日期. 1 var time=(new Date).getTime()-7*24*60*60*1000; 2 var ...

  8. CommonsCollection2反序列链学习

    CommonsCollection2 1.前置知识 CmonnosCollection2需要用到Javassist和PriorityQueue 1.1.Javassist Javassist是一个开源 ...

  9. 【C语言】预处理、宏定义、内联函数

    一.由源码到可执行程序的过程 1. 预处理: 源码经过预处理器的预处理变成预处理过的.i中间文件 1 gcc -E test.c -o test.i 2. 编译: 中间文件经过编译器编译形成.s的汇编 ...

  10. 小白上学のcanvas零基础

    <canvas> 元素 <canvas> 看起来和 <img> 元素很相像,唯一的不同就是它并没有 src 和 alt 属性.实际上,<canvas> ...