过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
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. 四种类型的数据节点 Znode？

    1.PERSISTENT-持久节点 除非手动删除,否则节点一直存在于 Zookeeper 上 2.EPHEMERAL-临时节点 临时节点的生命周期与客户端会话绑定,一旦客户端会话失效(客户端与 zoo ...

  2. 记一次 Nuxt 3 在 Windows 下的打包问题

    0. 背景 之前用 Nuxt 3 写了公司的官网,包括了样式.字体图标.图片.视频等,其中样式和字体图标放在了 assets/styles 和 assets/fonts 目录下,而图片和视频则放在了 ...

  3. Three.js 实现3D开放世界小游戏：阿狸的多元宇宙 🦊

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...

  4. Quartz高可用定时任务快速上手

    定时任务使用指南 如果你想做定时任务,有高可用方面的需求,或者仅仅想入门快,上手简单,那么选用它准没错. 定时任务模块是对Quartz框架进一步封装,使用更加简洁. 1.引入依赖 <depend ...

  5. Polymer API开发指南 (二)（翻译）

    公开 property 当你公开一个 Polymer 元素的 property 名字时,就等于把这个 property 设置为公开API了.公开 property 会有如下的特性: 支持声明数据双向绑 ...

  6. (1/2)Canvas的交互&存为图片-基本篇

    前言 公司的产品同学看到朋友圈疯传的这张图后.一拍脑袋,决定做个H5版本的来推广一波. 需求如下: 文字变成可以点击的,而且还要能够变色(闪瞎有木有) 中间的姓名换成用户的微信头像 点击button后 ...

  7. 介绍一项让 React 可以与 Vue 抗衡的技术

    好吧,我承认我是标题党.React 明明如日中天,把它与 Vue 倒过来,给 Vue 加点东西或可与 React 抗衡.不过,这两年 Vue 干的正是这事,不断加东西,不断优化,按它现有发展速度超越 ...

  8. Java/C++实现迭代器模式---学生信息

    信1305班共44名同学,每名同学都有姓名,学号和年龄等属性,分别使用JAVA内置迭代器和C++中标准模板库(STL)实现对同学信息的遍历,要求按照学号从小到大和从大到小两种次序输出学生信息. Jav ...

  9. java中异常到底有什么用？举例

    异常的意义:马克-to-win:通过上面的例子,我们看出通过引入异常这种技术,即使出现不测(用户把0赋给除数),也可以让程序不崩溃,还能继续优雅 的运行.那,这种技术有用,值得学.马克-to-win: ...

  10. smdms超市订单管理系统之登录功能

    一.超市订单管理系统准备阶段 Supermarket order management system 创建数据库 数据库代码放置如下 点击查看数据库address代码 CREATE TABLE `sm ...