Vue自定义日期过滤器

最新推荐文章于 2023-03-31 23:49:25 发布
最新推荐文章于 2023-03-31 23:49:25 发布
阅读量479 收藏
点赞数
分类专栏： JavaScript vue 文章标签： vue 过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35821283/article/details/84556534
版权

<!DOCTYPE html>
<html>

<head>
    <title>vue过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <p>{{date|capitalize("yyyy-MM-dd HH:mm:ss")}}</p>
    </div>
    <script type="text/javascript">
    /*全局过滤器*/
    Vue.filter('capitalize', function(value, format) {
        var date = '';
        var year = value.getFullYear();
        var month = value.getMonth() + 1;
        var day = value.getDate();
        var hours = value.getHours();
        var minute = value.getMinutes();
        var seconds = value.getSeconds();
        if (format == "yyyy-MM-dd") {
            date = year + "年" + month + "月" + day + "日"
        } else {
            date = year + "/" + month + "/" + day + " " + hours + ":" + minute + ":" + seconds
        }
        return date;
    })

    var app = new Vue({
        el: "#app",
        data: {
            date: new Date()
        },
        /*局部过滤器*/
        filters: {
            capitalize: function(value) {
                var date = '';
                var year = value.getFullYear();
                var month = value.getMonth() + 1;
                var day = value.getDate();
                var hours = value.getHours();
                var minute = value.getMinutes();
                var seconds = value.getSeconds();
                if (format == "yyyy-MM-dd") {
                    date = year + "年" + month + "月" + day + "日"
                } else {
                    date = year + "/" + month + "/" + day + " " + hours + ":" + minute + ":" + seconds
                }
                return date;
            }
        }
        methods: {

        }
    })
    </script>
</body>

</html>

茫然的旅行者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
将时间戳转日期格式的过滤器
学习永无止境
10-14 348
组件内 <div>{{ item.create_time | dateFormat }}</div> main.js Vue.filter('dateFormat', (dataStr) => { var time = new Date(dataStr*1000); function timeAdd0(str) { if (str < 10) { str = '0' + str; }
Vue中定义时间过滤器
qq_34746756的博客
07-14 290
Vue中定义时间过滤器属性 将机器时间处理成“yyyy-MM-dd hh:mm:ss"的形式 Vue.filter('format',function(value,arg){ function dateFormat(date,format){ if(typeof date === 'string'){ var mts = date.match(/(\/Date\((\d+)\)\/)/); if(mts && mts.length >= 3){ dat
vue自定义时间过滤器
qq_41792374的博客
06-21 1162
**// 自定义事件过滤器** Vue.filter('dateFormat', function (originVal) { var dt = new Date(originVal) var y = dt.getFullYear() var m = (dt.getMonth() + 1 + '') var d = (dt.getDate() + '') var hh = (dt.getHours() + '') var mm = (dt.getMinutes() + '') v
Vue - 自定义格式化时间的全局过滤器
技术共享，共同进步！
04-28 366
Vue - 自定义格式化时间的全局过滤器
vue定义时间过滤器
真真的博客
07-27 107
main.js文件 import Moment from 'moment' Vue.filter('formatDate', function(value) { return Moment(value).format('YYYY-MM-DD HH:mm:ss') }) vue使用 <span>{{timer|formateDate}}</span>
vue自定义filters过滤器
08-27
Vue 自定义 filters 过滤器 Vue 自定义 filters 过滤器是 Vue 框架中的一种强大功能，允许开发者创建自己的过滤器，以便在模板中进行数据处理和格式化。在这个知识点中，我们将详细介绍 Vue 自定义 filters 过滤器...
vue2.0 自定义日期时间过滤器
08-30
Vue 2.0 自定义日期时间过滤器 本文主要讲述了 Vue 2.0 中自定义日期时间过滤器的实现方法，共提供了两种实现方式。 方法一：使用 filters 实现日期时间过滤器 在 Vue 2.0 中，可以使用 filters 来实现日期时间...
详解Vue自定义过滤器的实现
08-31
Vue自定义过滤器是增强数据展示灵活性的重要工具。它们可以在数据绑定中插入，用于转换数据，使其适应特定的显示需求。全局过滤器适用于项目中多个组件共用的转换操作，而局部过滤器则更适合在特定组件内部使用，...
Vue-Cli中自定义过滤器的实现代码
12-10
// 导入日期过滤器 import dateFormat from './DateFormat'; // 导出过滤器，设置全局过滤器的名字 export { dateFormat }; ``` 在项目的主入口文件`src/main.js`中，我们需要导入`Filters/index.js`，并遍历导出...
Vue2.0如何自定义时间过滤器
weixin_30682415的博客
09-20 94
我们知道Vue2.0开始不再支持自带的过滤器，需要我们自己去自定义过滤器，方法如下： 我们可以自己定义一个时间过滤器，在此引用了一个日期处理类库（Moment.js）可以很快的实现我们要的结果。首先先安装这个类库的依赖，安装步骤官网上有详细说明在此不细说。主要就是看你想要转化成什么样的时间格式，一般来说我们从后台获取的应该都是时间戳，只需要很简单的几句代码即...
Vue定义全局时间过滤器
malone66的博客
08-14 159
需求：在项目中将后台传回来的时间戳转换为 年-月-日 时:分:秒 如：2021-08-0916:07:18 1.首先在main.js中添加一个全局过滤器，命名为dateFormat Vue.filter('dateFormat', function (originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2,.
vue过滤器—码虫带你飞
码虫带你飞
08-10 3481
过滤器 概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示； 私有过滤器 HTML元素： &lt;td&gt;{{item.ctime | dataFormat('yyyy-mm-dd')}}&lt;/td&gt;...
vue定义时间格式过滤器Vue.filter
Ali_code的博客
08-10 142
Vue.component('tree-table', TreeTable) // 时间过滤器 Vue.filter('dataFormat', function (originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2,.
vue实现自定义过滤器之时间格式自定义
weixin_40593587的博客
02-02 844
html> html lang="en"> head> meta charset="UTF-8"> 过滤器--> title>自定义过滤器title> head> script src="/vue.min.js">script> body> --> --> div id="app"> {{time|datefmt}} div> body> script> // n
vue 日期过滤器
Moize的博客
04-19 1287
@vue 日期过滤器 /* 全局时间过滤器 使用方法 e.g {{ [item.EntityEndTime,‘yyyy-MM-dd’] | Date}} */ Vue.filter(‘Date’, (item) => { const oDate = new Date(item[0]); const o = { ‘M+’: oDate.getMonth() + 1, // 月份 ‘d+’: oDate.getDate(), // 日 ‘h+’: oDate.getHours(), // 小时 ‘m+’
vue时间过滤器(moment)
estrusKing的博客
05-06 5610
JavaScript 日期处理类库，用于日期格式转换的。官网地址 npm下载: npm install moment 方法一 ：局部使用 在需要用的组件中引入： import moment from “moment”; 使用方法 this.num = moment(this.num).format(“YYYY年”); 方法二：全局使用 在全局中配置（main.js文件） // main.js import moment from 'moment' Vue.filter('dateForma
Vue中使用自定义过滤器转换Unix时间戳
Dexter's Laboratory
05-06 1855
从后台得到的json数据中使用了unix格式的时间戳，前台使用vue展示的时候可以用过滤器对模板中的标签进行处理，很是方便，实现过程：1.注册自定义过滤器&lt;script&gt; //注册自定义过滤器 Vue.filter('convTime', function(value) { var unixTimestamp = new Date(value * 1000); commo...
用vue 过滤器filters写一个日期
weixin_34351321的博客
04-14 226
<template> <div class="mydate"> {{date|formatDate(this)}} </div> </template> <script> export default{ data(){ return{ ...
Vue-自定义过滤器的使用
qq_31387691的博客
03-31 168
备注：formatDate被定义为接收两个参数的过滤器函数，其中 time 的值作为第一个参数，日期格式字符串（如：'yyyy-MM-dd'）作为第二个参数。④ 年月日时分秒（小于两位时补0）：yyyy-MM-dd HH:mm:ss。② 年月日（小于两位数时补0）：yyyy-MM-dd。（3）在main.js文件中引入filter.js并全局定义过滤器。考虑到代码的复用性，可以将自定义的日期过滤器函数注册到全局。（2）在filter.js中定义需要使用的过滤器函数。① 年月日：yyyy-M-d。
vue filter过滤器
最新发布
05-10
Vue.js提供了过滤器（filter）功能，可以用来处理文本格式化、大小写转换、日期格式化等常见需求。 使用方法如下： 1.在Vue实例定义中声明过滤器： ``` filters: { capitalize: function(value) { if (!value) ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值