精华内容
下载资源
问答
我要提问
  • vue过滤器格式化日期 vue 过滤器格式化时间
    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过滤器实现日期格式化的案例分析

     2020-10-15 04:12:47
    主要介绍了vue过滤器实现日期格式化的案例分析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    收起

  • vue 过滤器 格式化时间

     2021-07-22 17:38:58
    <!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中的过滤器及其时间格式化问题

     2020-10-15 10:49:40
    主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    收起

  • vue通过过滤器实现数据格式化

     2020-11-20 07:12:19
    一、本节说明 在使用插值表达式的时候，我们通常会有一种...全局过滤器（定义一个用于做日期格式化的过滤器） 过滤器的第一个参数是固定的，就是输入的数据。对于{{message|date-format('yyyy-mm-dd')}}而言，参数i
    收起

  • Vue-Vue过滤器实现格式化动态输出当时时间

     2021-08-25 21:15:38
    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并且输出

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

    收起
    展开全文
    html javascript

  • vue中格式化时间过滤器代码实例

     2020-10-17 03:53:27
    主要介绍了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 '' }) ...
    收起
    html

  • 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....
    收起

  • vue过滤器格式化时间日期

     2020-11-28 21:12:45
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <.../div.
    收起

  • vue 中用过滤器格式化时间

     2021-05-17 13:37:48
    vue 格式化时间，用过滤器 fliter 先下载moment依赖包 npm install moment --save 在文件里导入moment包 import Moment from 'moment' 自定义moment全局过滤器 Vue.filter('converTime', function(data, formatStr...
    收起
    javascript

  • Vue自定义过滤器格式化数字三位加一逗号实现代码

     2020-08-27 19:52:38
    主要介绍了Vue自定义过滤器格式化数字三位加一逗号的实现代码,需要的朋友可以参考下
    收起

  • vue 中格式化时间 过滤器格式化时间

     2021-06-24 18:44:18
    vue 中格式化时间 过滤器格式化时间 data.js 格式化方法使用 * // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个...
    收起

  • Vue使用filter过滤器格式化时间

     2021-12-09 11:43:20
    Vue使用filter过滤器格式化时间
    收起
    javascript

  • 【JavaScript源代码】vue使用过滤器格式化日期.docx

     2021-12-29 16:09:03
    vue使用过滤器格式化日期 　本文实例为大家分享了vue使用过滤器格式化日期的具体代码，供大家参考，具体内容如下　1、查看未过滤格式化的日期格式 2、设置模板函数format 接收日期值和日期格式 3、按照日期格式对...
    收起

  • Vue：使用 过滤器 进行 日期格式化

     2020-07-10 19:56:33
    <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
    收起
    filter

  • vue使用过滤器格式化日期

     2021-01-30 13:47:58
    本文实例为大家分享了vue使用过滤器格式化日期的具体代码，供大家参考，具体内容如下案例要求 案例讲解1、查看未过滤格式化的日期格式2、设置模板函数format 接收日期值和日期格式3、按照日期格式对日期进行拼接并...
    收起

  • vue 内置过滤器的使用总结(附加自定义过滤器)

     2020-12-08 20:47:51
    vue中过滤器filters的作用是什么？ 过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档。 能够帮我们处理快速一些数据的格式—-format...
    收起

  • Vue 过滤器-时间获取-格式化

     2022-05-16 17:55:47
    使用的方式： {{ 数据| 过滤器名称 }} 具体代码： 实现结果：
    收起
    javascript

  • Vue的全局过滤器和私有过滤器的实现

     2020-11-20 19:25:59
    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
    收起
    javascript

  • VUE使用过滤器来格式化当前时间

     2021-07-20 16:55:24
    当前时间为：{{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过滤器格式化日期