vue获取上个月日期,vue动态显示时间
本文主要介绍vue如何根据选择的月份动态显示日期对应的星期几，帮助你更好的利用vue框架处理日期需求。感兴趣的朋友可以了解一下。
我还是要唱“你我都是人，生在世上，每时每刻都在努力，从来没有一刻空闲。既然不是神仙，难免会有杂念，两边操心，中间买单，多少男人秃顶肥胖，没日没夜加班，没保险”。
我一直在反抗，但是从来没有效果。大老板们梦想成真，而我们却梦想着承担失败！
抱怨了这么多，锅还得背，类还得加，代码还得继续编码！
加油，实现题目中提到的这个效果。
其实原理很简单。首先，您必须有一个用于选择年份和月份的输入框。这里，我使用元素的DatePicker组件。我不想说怎么用。自己去看看Element的API吧。
然后根据选择的月份动态显示当前月份的每一天。这里使用了date对象的两个方法：setMonth和setDate。
其中，setMonth(month，day)方法用于设置月份。这些参数如下：
月份：必需。代表月份的数值，介于0(一月)和11(十二月)之间。
日：可选。代表一个月中某一天的数值，介于1和31之间(基于本地时间)。在EMCAScript标准化之前，不支持此参数。
set (day)方法用于设置日期(一个月中的某一天。这些参数如下：
日：必需。代表一个月中某一天的数值(1 ~ 31)。
具体代码如下：
模板
差异
El-date-picker v-model= month type= month @ change= month change placeholder= select month /
p
每月的每一天：
span v-for= item in daily :key= item style= margin-right:10px；{{item}}/span
/p
/div
/模板
脚本
导出默认值{
data() {
返回{
月份： ，
每天：[]
};
},
已安装(){
let date=new Date()，month=Date . getmonth()；
this . get daily(日期，月份)；
},
方法：{
月变化(日期){
this . get daily(date，date . getmonth())；
},
get daily(日期，月份){
//设置月份
date.setMonth(第1个月)；
//设置一个月中的某一天——这里设置为零，得到的日期中的那一天将是这个月的最后一天(比如二月是28号或者29号，其他月份是30号或者31号)，方便下面的循环。
date . set date(0)；
让day arry=[]；
//获取月份中的某一天
let day=date . getdate()；
for(设I=1；i=日；i ) {
date . set date(I)；//如果只获取当前所选月份的每一天，则不需要date.setDate(i)，只需要dayArry.push(i)，其中date.setDate(i)是设置当前月份的每一天。
day arry . push(I this . get weekday(date . getday()))；//所选月份的每一天以及星期几。
}
this . daily=day arry；
},
getWeekday(day){
Return [星期日，星期一，星期二，星期三，星期四，星期五，星期六][日]；
},
}
};
/脚本
显示效果如下：
注意，由于getMonth方法返回的值是从0开始的，所以如果想得到正确的月份，需要在返回值上加1。setDate有些特别，需要详细解释。setDate用于设置一个月中的某一天。例如，setDate(1)是一个月的第一天，setDate(10)是一个月的第十天。然而，由于众所周知的原因，一个月可能有28天或29天或30天或31天。如果非要自己写代码来判断，那就太繁琐了。这时，setDate(0)的威力就显现出来了。(setDate官方参数在1到31之间，零无情弃。零哥此时悲吟：无情世界对你无情，你把老子当垃圾捧在手里。)SetDate(0)设置为一个月的最后一天，不管这一天是28号还是29号，还是30号还是31号(零哥此时大喊：你以前无视我的爱，现在你承受不起了！)，然后获取我们通过getDate方法设置的一个月的最后一天。最后，来一个for循环，把每天都塞进一个数组，就可以称之为一天了！
当然，我们不是显示每一天对应的一周中的哪一天，而是只能用红色显示每一周的周六和周日对应的两天。代码仅稍作修改：
模板
div style= margin:50px；
El-date-picker v-model= month type= month @ change= month change placeholder= select month /
p style= margin-top:10px；
每月的每一天：
span v-for= item in daily :key= item style= margin-right:10px；v-html=item/span
/p
/div
/模板
脚本
导出默认值{
data() {
返回{
月份： ，
每天：[]
};
},
已安装(){
let date=new Date()，month=Date . getmonth()；
this . get daily(日期，月份)；
},
方法：{
月变化(日期){
this . get daily(date，date . getmonth())；
},
get daily(日期，月份){
//设置月份
date.setMonth(第1个月)；
//设置一个月中的某一天——这里设置为零，得到的日期中的那一天将是这个月的最后一天(比如二月是28号或者29号，其他月份是30号或者31号)，方便下面的循环。
date . set date(0)；
让day arry=[]；
//获取月份中的某一天
let day=date . getdate()；
for(设I=1；i=日；i ) {
date . set date(I)；
if(date . getday()==0 date . getday()==6){
day arry . push( I class= red I /I )；
}否则{
day arry . push(I)；
}
}
this . daily=day arry；
},
}
};
/脚本
风格。红色{颜色：红色；字体样式：正常；}
/风格
显示效果如下：
作者：小坏蛋
资料来源：http://tnnyang.cnblogs.com
以上是vue动态显示所选月份日期对应的星期几的详细情况。更多关于vue动态显示所选月份日期的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。