精华内容
下载资源
问答
  • 2021-08-09 23:05:12

    🎄 🎄 vue 过滤器格式化时间 🎄 🎄

    1. 借助插件 moment.js

      // 安装 moment.js
      npm install moment --save
      
      // main.js 全局引入
      import moment from 'moment'
      // main.js 定义全局过滤器
      // filter两个参数 第一个是函数名  第二个是时间格式化处理的函数
      Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
        return moment(dataStr).format(pattern)
      })
      // 需要格式化的时间
      <template slot-scope='scope'>
      	 {{ scope.row.add_time | dateformat('YYYY-MM-DD HH:mm:ss')}}
         {{ scope.row.add_time | dateFormat('HH:mm') }}
         {{ scope.row.add_time | dateFormat }}
      </template>
      
    2. Vue.filters

      // main.js
      // 时间过滤器
      Vue.filter('dateformat', function(time) {
        const date = new Date(time)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1 + '').padStart(2, '0')
        const day = (date.getDay() + '').padStart(2, '0')
        const hour = (date.getHours() + '').padStart(2, '0')
        const minute = (date.getMinutes() + '').padStart(2, '0')
        const second = (date.getSeconds() + '').padStart(2, '0')
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`
      })
      // 需要格式化的时间
      <template slot-scope='scope'>
      	 {{ scope.row.add_time | dateFormat }}
      </template>
      
    更多相关内容
  • 主要介绍了vue过滤器实现日期格式化的案例分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...格式化时间</title> <style> #app{ font-weight: bold; font-size: 20px; } </style> </he
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>格式化时间</title>
        <style>
            #app{
                font-weight: bold;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div>{{timeOne}} ----> {{timeOne | format}}</div> <!--默认格式-->
            <div>{{timeTwo}} ----> {{timeTwo | format('MM-DD')}}</div>
            <div>{{timeTwo}} ----> {{timeTwo | format('MM月DD日')}}</div>
            <div>{{timeTwo}} ----> {{timeTwo | format('YYYY/MM/DD')}}</div>
            <div>{{timeOne}} ----> {{timeTwo | format('YYYY-MM-DD')}}</div>
            <div>{{timeTwo}} ----> {{timeTwo | format('YYYY/MM/DD HH:mm:ss 星期w')}}</div>
            <div>{{timeTwo}} ----> {{timeTwo | format('YYYY-MM-DD 星期w')}}</div>
            <div>{{timeOne}} ----> {{timeTwo | format('YYYY年MM月DD日 星期w')}}</div>
            <div>时间戳:{{timeThree}} ----> {{timeThree | format('YYYY')}}</div>
            <div>时间戳:{{timeThree}} ----> {{timeThree | format('YYYY-MM')}}</div>
            <div>时间戳:{{timeThree}} ----> {{timeThree | format('YYYY-MM-DD HH:mm')}}</div>
            <div>时间戳:{{timeThree}} ----> {{timeThree | format('YYYY年MM月DD日')}}</div>
            <div>时间戳:{{timeThree}} ----> {{timeThree | format('YYYY年MM月DD日 星期w')}}</div>
            <div>时间戳:{{timeThree}} ----> {{timeThree | format('YYYY年MM月DD日 HH时mm分')}}</div>
        </div>
    </body>
    </html>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                timeOne: '2021/07/17 14:20:00',
                timeTwo: '2021-07-17 14:20:50',
                timeThree: 1626500149311 // 时间戳必须是数字类型
            },
            filters: {
                /**
                 *格式化时间文本
                 * @param {Date} time 时间
                 * @param {String} format 文本格式
                 *  Y 表示年份
                 *  M 表示月份
                 *  D 表示某日
                 *  h 表示小时
                 *  m 表示分
                 *  s 表示秒
                 *  w 表示星期几
                 */
                format(time, format = 'YYYY-MM-DD HH:mm:ss') {
                    let date = new Date(time)
                    let o = {
                        'M+': date.getMonth() + 1,
                        'D+': date.getDate(),
                        'H+': date.getHours(),
                        'm+': date.getMinutes(),
                        's+': date.getSeconds(),
                        'w': '日一二三四五六'.charAt(date.getDay())
                    };
    
                    format = format.replace(/Y{4}/, date.getFullYear()).replace(/Y{2}/, date.getFullYear().toString().substring(2));
    
                    let k, reg
                    for (k in o) {
                        reg = new RegExp(k);
                        /* eslint no-use-before-define:0 */
                        format = format.replace(reg, match);
                    }
                    function match(m) {
                        return m.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length);
                    }
    
                    return format;
                }
            }
        })
    </script>
    
    

    在这里插入图片描述

    展开全文
  • 主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 一、本节说明 在使用插值表达式的时候,我们通常会有一种...全局过滤器(定义一个用于做日期格式化过滤器过滤器的第一个参数是固定的,就是输入的数据。对于{{message|date-format('yyyy-mm-dd')}}而言,参数i
  • 16.Vue过滤器 1.介绍 Vue过滤器filters可以对数据进行过滤,实际上就是一个函数 在修饰符{{}}中使用|可以对数据进行过滤 格式为{{item | filters}} 2.举例 假设我们有这样一个需求:要按照一定格式并且实时输出时间 ...

    16.Vue过滤器

    1.介绍

    Vue过滤器filters可以对数据进行过滤,实际上就是一个函数

    在修饰符{{}}中使用|可以对数据进行过滤

    格式为{{item | filters}}

    2.举例

    假设我们有这样一个需求:要按照一定格式并且实时输出时间

    在编写之前我们介绍一款很好用的插件

    Dayjs,可以将输入的时间戳格式化,而且有非常多的格式化方式,非常方便

    [Dayjs](Format · Day.js (gitee.io))
    在这里插入图片描述

    我们利用Vue中的filter实现这个需求

    注意使用dayjs插件需要先下载然后引入

    <div id="app">
            {{newDate | formatTime}}
        </div>
    
    const vm = new Vue({
            el:'#app',
            data:{
                newDate:new Date()
            },
            mounted() {
                setInterval(() => {
                    vm.newDate = new Date(); // 修改日期数据
                }, 1000);
            },
            filters:{
                formatTime(val){
                    return dayjs(val).format('YYYY:MM:DD ss')
                }
            }
        })
    

    我们定义一个newDate属性,并给它设置一个初始值,防止刚进入页面时显示异常

    我们通过mounted挂载时间

    mounted在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

    在里面设置定时函数,每经过一秒钟,将newData重新赋值为当前时间戳

    然后我们通过在修饰符中对数据进行过滤

    formatTime函数中的val就是newData的值(当前为时间戳),通过dayjs格式化将新的数据传递给newDate并且输出

    这就实现了一个动态输出时间的需求

    展开全文
  • 主要介绍了vue格式化时间过滤器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue过滤器实现日期格式化

    千次阅读 2020-07-01 20:02:06
    今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例。 大家都知道,我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。 console.log(new Date()); 我们获取的是一个标准时间...

    说明

    今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例。
    大家都知道,我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。

    console.log(new Date());
    

    我们获取的是一个标准时间,控制台的输出如下所示。
    在这里插入图片描述
    在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化

    过滤器

    在vue中,我们可以使用过滤器来进行时间格式化。它的写法如下:

    // Vue.filter(过滤器名称,处理函数)
    

    使用的方式

    {{ 过滤器数据| 过滤器名称 }}
    

    具体代码

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    		<title>Document</title>
    	</head>
    	<body>
    		<div id="app">
    			<p>今天的日期是:{{timer|timerFilter('-')}}</p>
    		</div>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script>
    			Vue.filter("timerFilter", function (time, type) {
    				const month =
    					time.getMonth() + 1 > 10
    						? time.getMonth() + 1
    						: "0" + (time.getMonth() + 1);
    				const day =
    					time.getDate() > 10 ? time.getDate() : "0" + time.getDate();
    				return time.getFullYear() + type + month + type + day;
    			});
                
    			new Vue({
    				el: "#app",
    				data: {
    					timer: new Date(),
    				},
    			});
    		</script>
    	</body>
    </html>
    

    代码的运行结果如下所示:
    在这里插入图片描述

    结语

    过滤器的小案例就介绍完了,希望对您能有帮助。

    展开全文
  • vue使用过滤器将时间戳格式化时间

    千次阅读 2022-04-26 11:46:27
    所以还有一种,定义全局过滤器,将时间戳格式化 在main.js中定义 Vue.filter('dateFormat', (dateStr, pattern) => { if(dateStr) { return moment(Number(dateStr)).format(pattern) } else return '' }) ...
  • Vue过滤器 格式化时间

    2020-07-23 20:48:05
    过滤器时间格式化: <div>{{time | formtime}}</div> filters: { formtime(val) { var date = new Date(Number(val)); //时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = date....
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <.../div.
  • vue 格式化时间,用过滤器 fliter 先下载moment依赖包 npm install moment --save 在文件里导入moment包 import Moment from 'moment' 自定义moment全局过滤器 Vue.filter('converTime', function(data, formatStr...
  • 主要介绍了Vue自定义过滤器格式化数字三位加一逗号的实现代码,需要的朋友可以参考下
  • vue 中格式化时间 过滤器格式化时间 data.js 格式化方法使用 * // 对Date的扩展,将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个...
  • Vue使用filter过滤器格式化时间
  • vue使用过滤器格式化日期  本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下 1、查看未过滤格式化的日期格式 2、设置模板函数format 接收日期值和日期格式 3、按照日期格式对...
  • <body> <div id="app"> <div>{{date | formatDate('yyyy-MM-dd hh:mm:ss')}}</div> <...script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js ">... // Vue.fil
  • 本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下案例要求 案例讲解1、查看未过滤格式化的日期格式2、设置模板函数format 接收日期值和日期格式3、按照日期格式对日期进行拼接并...
  • vue过滤器filters的作用是什么? 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档。 能够帮我们处理快速一些数据的格式—-format...
  • 使用的方式: {{ 数据| 过滤器名称 }} 具体代码: 实现结果:
  • Vue允许自定义过滤器 可被用作一些常见的文本格式化 过滤器可以用在两个地方:mustache插值表达式 和 v-bind表达式 过滤器应被添加在JavaScript表达式的尾部 由“管道”符指示(管道符就是一个竖杠:|) 一、全局过滤...
  • vue时间格式化过滤器

    2022-04-29 17:25:38
    使用 <el-table-column label="创建时间"> <template #default="scope"> {{ scope.row.addtime | dateFormat }} ...//定义全局过滤器 Vue.filter("dateFormat", (dtStr) => { const dt = ne
  • 当前时间为:{{time|formatDate('xxxx-mm-dd')}}</p> </div> <script src='js/vue.js'></script> <script> Vue.filter("formatDate", function (value, str) { let dt = new

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,030
精华内容 5,212
关键字:

vue过滤器格式化日期