过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
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. redux和vuex以及dva?

    redux: 通过store存储,通过action唯一更改,reducer描述如何更改.dispatch一个action dva: 基于redux,结合redux-saga等中间件进行封装 vuex: ...

  2. 什么是 Spring Batch？

    Spring Boot Batch 提供可重用的函数,这些函数在处理大量记录时非常重要,包括日志/跟踪,事务管理,作业处理统计信息,作业重新启动,跳过和资源管理.它还提供了更先进的技术服务和功能,通过 ...

  3. Springmvc入门基础(二) ---架构详解

    1.框架结构图 架构流程文字说明 用户发送请求至前端控制器DispatcherServlet DispatcherServlet收到请求调用HandlerMapping处理器映射器. 处理器映射器根据 ...

  4. 在 Spring 框架中如何更有效地使用 JDBC?

    使用 SpringJDBC 框架,资源管理和错误处理的代价都会被减轻.所以开发者只 需写 statements 和 queries 从数据存取数据,JDBC 也可以在 Spring 框架提供 的模板类 ...

  5. 【转自百度fex】fex-team/interview-questions

    fex-team/interview-questions 注意 目前发现有其他人以 FEX 团队名义进行招聘,发出的邮箱皆为私人邮箱. 为防止在投递简历出现误会,在此提醒各位注意: FEX 团队没有以 ...

  6. Java中使用最频繁及最通用的Java工具类

    在Java中,工具类定义了一组公共方法,Java中使用最频繁及最通用的Java工具类. 一. org.apache.commons.io.IOUtils closeQuietly:关闭一个IO流.so ...

  7. window nginx 简单搭建服务器访问静态资源

    nginx命令: 启动: start nginx 停止:nginx -s stop ||  nginx -s quit 注:stop是快速停止nginx,可能并不保存相关信息:quit是完整有序的停止 ...

  8. 华为交换机Stelnet ssh/rsa验证模式下16进制公钥生成方法

    1.生成秘钥 需要在你自己电脑上生成 执行下面命令,默认生成位置是~/.ssh ssh-keygen -t rsa -b 1024 -f yourkeyname -C "备注" 参 ...

  9. ajax自己封装

    function paramsSeralize(obj){ if(!obj || typeof !== 'object') return obj; let res = ''; for (const k ...

  10. 基于PromiseA+规范实现一个promise

    实现如果下规范的promise Aplus规范 1,promise是一个类:有三个状态 pending/等待态 fulfilled/成功态 rejected/失败态 2,promise默认执行器立即执 ...