如图所示：
1.直接返回定义的时间
<template><!-- 注意： link 不能使用，因为它是内置的标签你要使用另外一个名称就行了，一般加上一个前缀--><div><el-button ><span>{{newDate}}</span></el-button></div></template>
2.然后就是需要挂载时间
注：这里是vue的生命周期，生命周期函数图示链接为 /v2/guide/instance.html#生命周期图示
created( ) 与 mounted( )的区别就是：
created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
data() {retrun{// 当前时间newDate: new Date()}},// 挂载时间mounted () {let that = thisthis.timer = setInterval(function () {that.newDate = new Date().toLocaleString()})},// 销毁时清除计时器beforeDestroy: function () {if (this.timer) {clearInterval(this.timer)}}，
this.timer即为定时器
做到这里时间就可以显示了
如图：
3.我们可以对时间进行格式化：
按钮改为需要调用格式的方法即可
<el-button ><span>{{dateFormat(newDate)}}</span></el-button>
对时间进行格式处理
methods: {// 时间格式化dateFormat () {var date = new Date()var year = date.getFullYear()/* * 在日期格式中，月份是从0开始的* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05* /var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1var 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()let week = date.getDay() // 星期let weekArr = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]// 拼接 时间格式处理return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]}}
效果如图所示：
