vue自定义日历组件,vue实现一个炫酷的日历组件
这篇文章主要为大家详细介绍了vue。j模拟日历插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
今天要实现的功能就是以下这个功能：vue.js模拟日历插件
好了废话不多说了直接上代码了
css:
*{
边距：0;
填充：0;
-WebKit-box-sizing:border-box；
moz-box-size:border-box；
框大小：边框-框；
}
#app{
宽度：1000像素
边距：10px自动；
}。日历{
宽度：1000像素
}。日历表{
宽度：1000像素
}。日历表，th，tr，td{
边框：1px固体# 333333
边框-塌陷：塌陷；
}。日历时间
高度：100像素
垂直对齐：顶部；
文本对齐：左对齐；
填充：5px 0 0 5px
字体大小：13px
}。日历时间
颜色：红色；
}
html:
div id=应用程序
日历
桌子
标题
选择垂直型号。编号=年份
选项v-for= I of 490 { { I 1969 } }/选项
/选择
选择垂直型号。编号=月
选项v-for= I of 12 { { I } }/选项
/选择
/标题
四羟乙基己二酰胺
tr
泰国(泰国)周日/th
泰国(泰国)周一/th
泰国(泰国)周二/th
泰国(泰国)周三/th
泰国(泰国)周四/th
泰国(泰国)周五/th
泰国(泰国)周六/th
/tr
/thead
在需要分行下载处加上
！-索引从0开始我从一开始-
tr v-for=(a，索引)日历长度/7
TD v-for= I of 7 :class= { cur:calender[index * 7(I-1)].cur } { { calendar[index * 7(I-1)].全天}}/td
/tr
/tbody
/表格
/div
/div
js:
var vm=new Vue({
埃尔： #app ，
数据：{
年份：2018年，
月份：1
},
计算值：{
日历(){
var arr=[]；
//新数据有三个参数： 1,年2.月3.默认是一如果是0,表示上个月最后一天-前两天3后天
var nowMonthLength=新日期（今年，本月，0)。getDate()；
var nowMonthFirstWeek=新日期（今年，今年-1)。getDay()；
var lastMonthLength=新日期(今年，本月-1，0).getDate()；
console.log(本月有： nowMonthLength)；
console.log(本月第一天nowMonthFirstWeek)；
console.log(上个月长度lastMonthLength)；
//这个。month=parse int(this。月)；
//每个月的上一个月是哪一年的那一个月
var pmonth=this.month==1？12:这个。第1个月；
//上一年
var pyear=this.month==1？今年1月：今年；
//下一月
var nmonth=this.month==12？1:这个。第1个月；
//下一月
var nyear=this.month==12？今年1:今年；
//补零函数
//function toTwo(n) {
//返回n 10？0 n:n；
//}
功能构建(名词)
返回托字符串.长度1?n . tostring(): 0 n . tostring()；
}
//补充上个月的最后几天
while(nowMonthFirstWeek - ){
arr.unshift({
day:lastMonthLength，
当前：没错，
全天：` $ { pyear }-$ { buling(p month)}-$ { buling(lastMonthLength)} ` 1
});
lastMonthLength -
}
控制台。日志(arr)；
//本月天数
var _ a=1；
while(nowMonthLength - ){
arr.push({
日：_a，
当前：假，
全天：` $ { this。year }-$ { buling(这个。month)}-$ { buling(_ a)} `
});
_a
}
//下个月补全
var nextLength=arr.length 35？42排列长度：35排列长度；
_ a=1；
while (nextLength - ){
arr.push({
日：_a，
当前：没错，
全天：` $ { nyear }-$ { buling(nmonth)}-$ { buling(_ a)} ` 1
});
_a
}
返回arrive）
}
}
})
注意：需要先引入你本地的vue。j文件，才能正常运行哦！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。