精华内容
下载资源
问答
  • 既然是做系统,通常都离不开时间的装换,今天遇到的这个功能是做个`vue` 的 `formatDate 时间转换`的 `filter 过滤器` 需求如下: - 提前封装好`过滤器formatDate` - `data`里面定义 `date: new Date()` - 直接`...

    问题背景

    既然是做系统,通常都离不开时间的装换,今天遇到的这个功能是做个vueformatDate 时间转换filter 过滤器
    需求如下:

    • 提前封装好过滤器formatDate
    • data里面定义 date: new Date()
    • 直接template可以使用 {{date|formatDate(this)}}

    解决方案

    效果展示
    在这里插入图片描述
    核心代码

    methods:{
                setZero(a) {//设置小于10的数字在加0
                    return a < 10 ? "0" + a : a;
                },
    },
    filters:{
     	//zhengkai.blog.csdn.net
     	//格式化当前时间
         formatDate(date,vm) { 
             let str = "";
             let weekDay = [
                 "星期天",
                 "星期一",
                 "星期二",
                 "星期三",
                 "星期四",
                 "星期五",
                 "星期六"
             ];
             str += vm.setZero(date.getFullYear()) + "年"; //获取年份
             str += vm.setZero(date.getMonth() + 1) + "月"; //获取月份
             str += vm.setZero(date.getDate()) + "日"; //获取日
             str += " " + weekDay[date.getDay()]; //获取星期
             //如果需要具体到时分秒请加上以下内容:
             /*str += " " + vm.setZero(date.getHours()) + ":"; //获取时
             str += " " + vm.setZero(date.getMinutes()) + ":"; //获取分
             str += vm.setZero(date.getSeconds()); //获取秒*/
             return str;
         }
     }
    

    所有代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>TFS</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
    <div id="app">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>今日招标信息 {{date|formatDate(this)}}</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div v-for="o in 10" :key="o" class="text item">
                {{'列表内容 ' + o }}
            </div>
        </el-card>
    </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: function() {
                return {
                    date: new Date(),
                }
            },
            methods:{
                setZero(a) {//设置小于10的数字在加0
                    return a < 10 ? "0" + a : a;
                },
            },
            filters:{
            	//zhengkai.blog.csdn.net
            	//格式化当前时间
                formatDate(date,vm) { 
                    let str = "";	
                    //如果需要星期请加上
                    let weekDay = [
                        "星期天",
                        "星期一",
                        "星期二",
                        "星期三",
                        "星期四",
                        "星期五",
                        "星期六"
                    ];
                    str += vm.setZero(date.getFullYear()) + "年"; //获取年份
                    str += vm.setZero(date.getMonth() + 1) + "月"; //获取月份
                    str += vm.setZero(date.getDate()) + "日"; //获取日
                    str += " " + weekDay[date.getDay()]; //获取星期
                    //如果需要具体到时分秒请加上以下内容:
                    /*str += " " + vm.setZero(date.getHours()) + ":"; //获取时
                    str += " " + vm.setZero(date.getMinutes()) + ":"; //获取分
                    str += vm.setZero(date.getSeconds()); //获取秒*/
                    return str;
                }
            }
        })
    </script>
    </html>
    
    展开全文
  • 1、前端获取实时时间 <template> <view class="content"> <view>{{date}}</view> </view> </template> <script> export default { data() { return{ date...

    1、前端获取实时时间

    <template>
    	<view class="content">
    		<view>{{date}}</view>
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return{
    					date: new Date()
    			}
    		},
    		onLoad() {},
    		mounted: function() {
    			let that = this
    			//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
    			//每一毫秒调用一次
    			that.timer = setInterval(function() {
    				that.date = new Date();
    			}, 1000)
    		},
    		beforeDestroy: function() {
    			if (this.timer) {
    				clearInterval(this.timer)
    			}
    		},
    		methods: {
    		}
    	}
    </script>
    

    获得国际标准时间
    在这里插入图片描述
    2、运用过滤器,通过给Vue实例添加选项filters来设置,给时间格式化处理

    <template>
    	<view class="content">
    		<view>{{date  | formatDate}}</view>
    	</view>
    </template>
    
    <script>
    	//一、时间转换关键
    	var padDate = function(value) {
    		return value < 10 ? '0' + value : value;
    	};
    	export default {
    	//二、时间转换关键
    		filters: {
    			formatDate: function(value) {
    				var date = new Date(value);
    				var year = date.getFullYear();
    				var month = padDate(date.getMonth()+1);
    				var day = padDate(date.getDate());
    				var hours = padDate(date.getHours());
    				var minutes = padDate(date.getMinutes());
    				var seconds = padDate(date.getSeconds());
    				return year + '-' + month + "-" + day + "  " + hours + ":" + minutes + ":" + seconds
    			}
    		},
    		
    		data() {
    			return{
    				date: new Date()
    			}
    		},
    		onLoad() {},
    		mounted: function() {
    			let that = this
    			//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
    			//每一毫秒调用一次
    			that.timer = setInterval(function() {
    				that.date = new Date();
    			}, 1000)
    		},
    		beforeDestroy: function() {
    			if (this.timer) {
    				clearInterval(this.timer)
    			}
    		},
    		methods: {
    		}
    	}
    </script>
    

    在这里插入图片描述

    展开全文
  • Vue.filter('dateFormat', function(originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart...

    一,vue转换时间为年月日(补零)

      datatime(value) {
    	   var data = new Date(value);
    	   var month =data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
    	   var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
    	   this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date;
    	   console.log( this.addForm.enter_date)
    	  },
    

    效果图
    在这里插入图片描述
    在这里插入图片描述

    二,vue 转换时间格式 为年月日时分秒

    方法一

    在main.js引入 过滤器
    Vue.filter('dateFormat', 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, '0')
    
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
    
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    })
    
    在需要的组件里
    <el-table-column label="发生日期和时刻" align="center">
             <template slot-scope="scope">{{scope.row.guzhangStartTime | dateFormat}}</template>
    </el-table-column>
    //guzhangStartTime  是你表格数据里拿到的字段
    

    方法二

    npm i moment --save
    
    在main.js中
    //转换时间格式
    import moment from 'moment/moment'
    Vue.filter('moment', function (value, formatString) {
        formatString = formatString || 'YYYY-MM-DD';
    return moment(value).format(formatString);
    
    });
    
    在需要的组件里
    <el-table-column label="故障记录日期" align="center">
           <template slot-scope="scope">{{scope.row.guzhangjiluTime | moment}}</template>
    </el-table-column>
    

    效果图
    在这里插入图片描述

    展开全文
  • vue转换后端时间格式

    2021-01-22 10:57:43
    转换时间格式后 首先现在methods里定义方法 //时间格式转换 dateFormat: function (time) { var date = new Date(time); var year = date.getFullYear(); /* 在日期格式中,月份是从0开始的,因此要加0 * 使用...

    后端传过来的数据是这样的
    在这里插入图片描述
    转换时间格式后
    在这里插入图片描述
    首先现在methods里定义方法

    //时间格式转换
        dateFormat: function (time) {
          var date = new Date(time);
          var year = date.getFullYear();
          /* 在日期格式中,月份是从0开始的,因此要加0
           * 使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
           * */
          var month =
            date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
          var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
          var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
          var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
          var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
          // 拼接
          return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        },
    

    然后模型层渲染

            <span>{{ dateFormat(loginMessInfo.expireTime) }}</span>
    
    展开全文
  • 1.过滤器:Vue.filter('formatDate', GlobalFn.formatDate)2.全局方法:GlobalFn.formatDate = function (datetime, fmt) {let date;switch (typeof datetime) {case 'string':if (datetime == '') {return '';}date...
  • vue标准时间格式转换

    2020-12-17 14:46:36
    转换时间格式为yyyy-MM-dd hh:mm:ss. formatDate(date,fmt){ let time = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds(), ...
  • // 中国 东8区 韩国 东9区 印度 东5.5区export const getNewDate = function({ date, zone }) { // date 日期格式 zone 时区var timezone = zone || 8; //目标时区时间var dates = date || new Date()var offset_GMT...
  • 1.vue中先引入npm install moment --save 2.创建utils/dateUtils.js工具类 export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr...
  • vue时间格式转换

    2020-12-30 11:57:03
    //时间转换 Vue.filter('dateFormat', function (originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '')....
  • Vue时间格式转换

    2021-01-08 10:14:24
    时间格式转换 SimpleDateFormat .js export default class SimpleDateFormat { constructor(pattern) { this.pattern = pattern; } pattern = "yyyy_MM_dd HH:mm:ss"; parse = function (source) { try { ...
  • 在我们的日常工作和生活中,通过电脑处理相关工作的主要文件形式主要有Word、Excel、PPT、TXT、图片等形式,这几种文件格式基本可以满足我们日常工作需求。但是这几年开始,又有一种比较流行的文件格式出现在我们的...
  • 解决vue项目中时间格式转换 刚开始写的时候是用这种方式转换的 // 时间格式转换 Vue.filter(‘dateFormat’, function (origin) { const newDate = new Date(origin); const n = newDate.getFullYear(); const y = ...
  • import utils from '@/common/js/utils'/** * 传入时间戳,转换指定的时间格式 * @param {Number} val 时间戳 * @param {String} dateType 要得到的时间格式 例如 YYYY-MM-DD hh:mm:ss * @return dataStr 例如 YYYY-...
  • vue 修改时间格式

    2020-12-17 10:20:47
    在我们在书写vue组件的过程中,我们往往需要针对时间格式的各种格式来回切换,这次我们说一说时间戳转换成时间字符串的方法 假如后台给我们返回了一个时间字段(假设字段为date),但是他返回的是时间戳,那我们想...
  • } 如何把数组的时长秒数转换成00:00:00这种时间格式 回答 const fomatSecond = (time) => { const push0 = str => str; return `${push0(parseInt(time/60/60))}:${push0(parseInt(time/60%60))}:${push0(time%...
  • 比如将2020-12-09T09:06:46.086Z转换为:2020-12-09 17:06:46 这里直接使用插件:dayjs来实现 一、下载dayjs cnpm i -S dayjs 二、引入dayjs 如果在node中,引入方式为:vardayjs=require('dayjs') 如果在vue...
  • 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...
  • 关于vue element-ui组件 时间格式转换下载moment.jsnpm install moment --save1,在组件中prop="createTime":formatter="dateFormat"label="创建时间">用 ':formatter' 来绑定 设置时间格式的方法dateForma2,在...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 344
精华内容 137
关键字:

vue转换时间格式

vue 订阅