VUE:过滤器及日期格式化moment库

VUE:过滤器及日期格式化moment库

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>11_过滤器</title>
    </head>
    <body>
        <!--
            1)定义过滤器
                Vue.filter(filterName,function(value[arg1,arg2,...])){
                    //进行一定的数组处理
                    return newValue
                }
            2)使用过滤器
                <div>{{myData | filterName}}</div>
                <div>{{myData | filterName{arg}}}</div>
        -->
        <!--   需求:对当前时间进行指定格式显示     -->
        <div id="test">
            <h2>显示格式化的日期时间</h2>
            <p>{{date}}</p>
            <p>完整版:{{date | dateString}}</p>
            <p>年月日:{{date | dateString(‘YYYY-MM-DD‘)}}</p>
            <p>时分秒:{{date | dateString(‘HH:mm:ss‘)}}</p>
        </div>

        <script type="text/javascript" src="../js/vue.js" ></script>
        <!--    moment日期格式化的库:地址:momentjs.cn        -->
        <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
        <script>
            //自定义过滤器
            //思考:函数对象(Vue为一个函数,作为对象来使用)
//          Vue.filter(‘dateString‘,function(value,format){
//              return moment(value).format(format||‘YYYY-MM-DD HH:mm:ss‘)
//          })

            //也可以用形参默认值
            Vue.filter(‘dateString‘,function(value,format=‘YYYY-MM-DD HH:mm:ss‘){
                return moment(value).format(format)
            })

            new Vue({
                el:‘#test‘,
                data:{
                    date:new Date()
                }
            })
        </script>
    </body>
</html>

原文地址:https://www.cnblogs.com/it-taosir/p/9961184.html

时间: 2024-10-29 03:34:01

VUE:过滤器及日期格式化moment库的相关文章

django 过滤器 、日期格式化参数

django1.4 html页面从数据库中读出DateTimeField字段时,显示的时间格式和数据库中存放的格式不一致,比如数据库字段内容为2012-08-26 16:00:00,但是页面显示的却是Aug. 26, 2012, 4 p.m. 为了页面和数据库中显示一致,需要在页面格式化时间,需要添加<td>{{ dayrecord.p_time|date:"Y-m-d H:i:s" }}</td> 类似的过滤器.刷新页面,即可正常显示. 过滤器相关: 一.形式

vue 日期格式化过滤器

formateDate日期格式化,写在公共的js中: export function formateDate(date, fmt){ if ('/(y+)/'.test(fmt){ fmt = fmt.replace(RegExp.$1, (date.getFullYear()+'').substr(4-RegExp.$1.length)); } let obj = { 'M+': date.getMonth()+1, 'd+': date.getDate(), 'h+': date,getHo

django 过滤器、日日期格式化参数

转载:http://blog.csdn.net/xyp84/article/details/7945094 django1.4 html页面从数据库中读出DateTimeField字段时,显示的时间格式和数据库中存放的格式不一致,比如数据库字段内容为2012-08-26 16:00:00,但是页面显示的却是Aug. 26, 2012, 4 p.m. 为了页面和数据库中显示一致,需要在页面格式化时间,需要添加<td>{{ dayrecord.p_time|date:"Y-m-d H:i

Js获取当前日期时间+日期印证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天

Js获取当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天 字符串转日期型+Js当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+日期所在年的第几周 日期时间脚本库方法列表Date.prototype.isLeapYear 判断闰年Date.prototype.Format 日期格式化Date.prototype.DateAdd 日期计算Date.prototype.DateDiff 比较日期差Date.prototype.toString 日期转字符

JSP中利用JSTL标签对日期格式化

数据库:Mysql 开发语言:JAVA 页面类型:JSP 对Mysql中的日期类型格式化,在JSP中,如何办呢,很多人说在JAVA后台去日期格式化,无奈了,于是找到了比较靠谱的答案 需要先引入JSTL库 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 其次对JSP输出的日期进行格式化 <span>发布时间:<fmt:formatDate value=&qu

日期格式化{0:yyyy-MM-dd HH:mm:ss.fff}和{0:yyyy-MM-dd hh:mm:ss.fff}的区别

日期格式化{0:yyyy-MM-dd HH:mm:ss.fff}和{0:yyyy-MM-dd hh:mm:ss.fff}的区别 {0:yyyy-MM-dd HH:mm:ss.fff}:使用24小时制格式化日期{0:yyyy-MM-dd hh:mm:ss.fff}:使用12小时制格式化日期 以下同理,从左至右分别为-年-月-日 时:分:秒.毫秒{0:yyyy-MM-dd HH:mm:ss zzz}{0:yyyy-MM-dd HH:mm:ss.ff zzz}{0:yyyy-MM-dd HH:mm:s

js Date 日期格式化(转)

var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1970-????)myDate.getMonth();       //获取当前月份(0-11,0代表1月)myDate.getDate();        //获取当前日(1-31)myDate.getDay();         //获取当前星期X(0-6,0代表星期天)myDate.getTi

AngularJS的日期格式化有两种形式

AngularJS的日期格式化有两种形式,一种是在HTML页面,一种是在JS代码里,都是用到AngularJS的过滤器$filter. HTML: date_expression 即 你在$scope中设的date类型变量(注意,一定是date object才正确), 也是要显示出来的日期,|是分割符号,分割符号后面的第一个参数date是指明过滤器类型是过滤日期的,第二个参数format是你的日期要格式化成什么样子,比如yyyy-MM-dd,最后timezone一个是时区(可选参数),对于国际化

JavaScript日期格式化及解析

JavaScript开发经常需要对日期进行转换,把日期转成字符串或者从字符串生成日期.JavaScript日期对象内置了简单的日期格式化方法toString()和日期解析方法Date.parse(),这两个方法有较大的局限性,不能自定义自定义日期格式化和解析的字符串格式.下面列出一些常用的日期处理JS库. 名称 描述 Xdate XDate对Javascirpt本地Date对象进行了轻度包装,它提供对日期解析.格式化以及其他操作的加强功能,实现了本地Date对象的相同方法.https://git