目录
简介
Vue.js 是一个用于构建用户界面和单页应用程序的开源 JavaScript 框架。它由 Evan You 于 2014 年创建，此后成为用于构建 Web 应用程序的最流行的 JavaScript 框架之一。
Vue 以其简单性和灵活性着称，使各种技能水平的开发人员都可以轻松使用。它还具有体积小和开销低的特点，使其非常适合较小的项目和渐进式增强。
Vue 使用模板语法，允许开发人员以声明方式在 DOM 中呈现动态数据，从而轻松推断应用程序的状态。Vue 还使用虚拟 DOM，它提供了一种高性能机制，可以在底层数据发生变化时更新视图。
Vue 的架构基于一组可组合的组件，这些组件可以组合起来创建复杂的用户界面。Vue 还有一个内置的反应系统，可以轻松处理和管理状态，并支持指令、过滤器和一组强大的开发人员工具和插件。
总的来说，Vue.js 是构建动态、交互式用户界面和单页应用程序的绝佳选择。
获取前几天的时间
moment.js是一款现在对时间处理的强大的函数
如果没有安装的话先执行npm install moment命令
-
import moment
from
'moment';
-
-
export
default {
-
-
data(
) {
-
return {
-
// 写在data中或者写在methods里面，一定要写不然会报错
-
moment
-
}
-
},
-
-
methods: {
-
changeRecent(
value) {
-
// 开始日期
-
moment(
new
Date()).
format(
'YYYY-MM-DD')+
' '+
'23:59:59'
-
// 结束日期 value 3、7、30
-
moment(
new
Date().
getTime() - value *
1000 *
24 *
60 *
60).
format(
'YYYY-MM-DD')+
' '+
'00:00:00');
-
},
-
}
-
}
vue 根据指定日期 获取日期所在月份的第一天和最后一天
-
将当前时间格式化
-
dateFormat(
time) {
-
let date =
new
Date(time);
-
let year = date.
getFullYear();
-
let wk = date.
getDay()
-
/* 在日期格式中，月份是从0开始的，因此要加0
-
* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
-
* */
-
let month = date.
getMonth() +
1 <
10 ?
"0" + (date.
getMonth() +
1) : date.
getMonth() +
1;
-
let day = date.
getDate() <
10 ?
"0" + date.
getDate() : date.
getDate();
-
let hours = date.
getHours() <
10 ?
"0" + date.
getHours() : date.
getHours();
-
let minutes = date.
getMinutes() <
10 ?
"0" + date.
getMinutes() : date.
getMinutes();
-
let seconds = date.
getSeconds() <
10 ?
"0" + date.
getSeconds() : date.
getSeconds();
-
let weeks = [
'星期日',
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六']
-
let week = weeks[wk]
-
// 拼接
-
return year +
"年" + month +
"月" + day +
"日" +
" " + hours +
":" + minutes +
":" + seconds +
' ' + week;
-
},
-
使用：
this.
newDate =
this.
dateFormat(
new
Date());
-
-
-
import moment
from
'moment';
-
// 写在data中或者写在methods里面，一定要写不然会报错
-
moment,
-
// 获取当前月的开始结束时间
-
getCurrMonthDays(
) {
-
let obj = {
-
starttime:
'',
-
endtime:
''
-
}
-
obj.
starttime =
moment(
moment().
month(
moment().
month()).
startOf(
'month').
valueOf()).
format(
'YYYY-MM-DD HH:mm:ss');
-
obj.
endtime =
moment(
moment().
month(
moment().
month()).
endOf(
'month').
valueOf()).
format(
'YYYY-MM-DD HH:mm:ss');
-
return obj
-
},
-
使用：
console.
log(
this.
getCurrMonthDays())
获取系统当天日期以及前一天和前一月前一年
1、首先vue项目中要安装到moment.js
获取前一天的日期
moment().subtract(1, 'day').format('YYYY-MM-DD') //1，day就代表前一天如果要获取前一个月或者前一年就将day换成month或者year，剩下的时间可以根据实际情况来定
例如前一月
moment().subtract(1, 'month').format('YYYY-MM-DD')前一年
moment().subtract(1, 'year').format('YYYY-MM-DD')如果要按照具体的时间来的话，在’moment()'中加入对应格式的日期字符串比如’moment(‘2022-3-21’).subtract(2, ‘day’).format(‘YYYY-MM-DD’))
2、使用原生js
-
<script>
-
let a =
getFMdate(
0)
-
let b =
getFMdate(-
1)
-
let c =
getFMdate(
8)
-
console.
log(a, b, c)
-
-
function
getFMdate (number, separator) {
-
let n =
parseInt(number)
-
let nd =
new
Date()
-
let day = nd.
getDate()
-
let setd =
new
Date(nd.
setDate(day + n))
-
let ryear = setd.
getFullYear()
-
let rmonth = setd.
getMonth() +
1
-
let rday = setd.
getDate()
-
let frmonth, frday;
-
// month day + '0'
-
if (rmonth <
10) {
-
frmonth =
'0' + rmonth
-
}
else {
-
frmonth = rmonth
-
}
-
if (rday <
10) {
-
frday =
'0' + rday
-
}
else {
-
frday = rday
-
}
-
// separator
-
let sep = separator ? separator :
'-'
-
return ryear + sep + frmonth + sep + frday
-
}
-
</script>
传入 0 ， 获取今天日期
传入负数， 获取过去N天日期
传入整数， 获取未来N天日期
这里主要是对setDate / setMonth / setYear的一个运用，笔者还是建议直接使用vue的moment()方法，底层已经帮我们封装好，不用计算跨月第一天的前一天或者跨年的前一天，省去了代码的冗余度，提高效率。
3、也是vue获取，但是没有第一种那么简单暴力
-
// 前一天
-
beforeDay(
) {
-
//前一天
-
let beforeDay =
new
Date(
-
new
Date(
this.
alarmformSearch.
date).
getTime() -
24 *
60 *
60 *
1000
-
);
//计算当前日期 -1
-
this.
alarmformSearch.
date =
this.
convertToDate(beforeDay);
//格式化日期并赋值
-
-
this.
getWarnInfo();
-
},
-
// 前两天
-
beforeTwoDay(
) {
-
//前一天
-
let beforeTwoDay =
new
Date(
-
new
Date(
this.
alarmformSearch.
date).
getTime() -
-
24 *
60 *
60 *
1000 -
-
24 *
60 *
60 *
1000
-
);
//计算当前日期 -1
-
this.
alarmformSearch.
date =
this.
convertToDate(beforeTwoDay);
//格式化日期并赋值
-
-
this.
getWarnInfo();
-
},
-
convertToDate(
date) {
-
var date =
new
Date(date);
-
var y = date.
getFullYear();
-
var m = date.
getMonth() +
1;
-
var d = date.
getDate();
-
m = m <
10 ?
"0" + m : m;
//月小于10，加0
-
d = d <
10 ?
"0" + d : d;
//day小于10，加0
-
return y +
"-" + m +
"-" + d;
-
},
对比下来感觉第三种还不如写原生js，哈哈，还好vue底层帮我们封装好了现成的moment（）方法，很方便
el-date-picker设置默认时间为当前时间
-
<el-form-item
-
label=
"创建时间"
-
:label-width=
"formLabelWidth"
-
>
-
<el-date-picker
-
v-model=
"addForm.createDate"
-
style=
"width:100%"
-
type=
"datetime"
-
placeholder=
"选择日期"
-
/>
-
</el-form-item>
-
//data里的数据
-
data(
){
-
addForm:{
-
createDate:
new
Date()
// 只需要在这里声明的时候直接值赋为 new Date()
-
}
-
}
-
-
-
dingdKpData:
"",
-
this.
dingdKpData = [
this.
date_start,
this.
date_end]
-
-
-
getdate(
){
-
//年
-
let year =
new
Date().
getFullYear();
-
//月份是从0月开始获取的，所以要+1;
-
let month =
new
Date().
getMonth() +
1;
-
//日
-
let day =
new
Date().
getDate();
-
//时
-
let hour =
new
Date().
getHours();
-
//分
-
let minute =
new
Date().
getMinutes();
-
//秒
-
let second =
new
Date().
getSeconds();
-
return year +
'-' + month +
'-' + day;
-
},
-
<el-form-item label=
"收款日期" prop=
"collection_date">
-
<el-date-picker v-model="baseInfoObj.collection_date" size="small" type="date" placeholder="收款日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%">
-
</el-date-picker>
-
</el-form-item>
-
-
-
this.
baseInfoObj.
collection_date =
this.
dateFormat(
'YYYY-mm-dd',
new
Date())
-
-
-
==>main.
js
-
import { dateFormat }
from
'./utils/day'
-
Vue.
prototype.
dateFormat = dateFormat
-
-
==>
utils=>day.
js
-
-
//获取当前日期 参数 "YYYY-mm-dd HH:MM:SS" new Date()
-
export
function
dateFormat(
fmt, date) {
-
let ret;
-
const opt = {
-
"Y+": date.
getFullYear().
toString(),
// 年
-
"m+": (date.
getMonth() +
1).
toString(),
// 月
-
"d+": date.
getDate().
toString(),
// 日
-
"H+": date.
getHours().
toString(),
// 时
-
"M+": date.
getMinutes().
toString(),
// 分
-
"S+": date.
getSeconds().
toString()
// 秒
-
// 有其他格式化字符需求可以继续添加，必须转化成字符串
-
};
-
for (
let k
in opt) {
-
ret =
new
RegExp(
"(" + k +
")").
exec(fmt);
-
if (ret) {
-
fmt = fmt.
replace(ret[
1], (ret[
1].
length ==
1) ? (opt[k]) : (opt[k].
padStart(ret[
1].
length,
"0")))
-
};
-
};
-
return fmt;
-
}
转载：https://blog.csdn.net/qq_38334677/article/details/128652954
查看评论