Vue.js创建Calendar日历效果
发布时间：2020-12-17 03:06:54 所属栏目：百科 来源：网络整理
导读：使用 Vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 Android 里面的 DataBinding。实现一个HTML的日历效果。 html 部分 一 二 三 四 五 {{ day.getDate() }} id 为 calendar 对应的创建一个 Vue 对象，设置 el 为 ‘#calendar'。 完整代
|
使用 Vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 Android 里面的 DataBinding。 实现一个HTML的日历效果。
html 部分
id 为 calendar 对应的创建一个 Vue 对象，设置 el 为 ‘#calendar'。 = 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
console.log("y:" + d.getDate());
this.days.push(d);
}
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
this.days.push(d);
}
},pick: function(date) {
alert(this.formatDate( date.getFullYear(),date.getMonth() + 1,date.getDate()));
},pickPre: function(year,month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year,month,1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
},pickNext: function(year,month) {
var d = new Date(this.formatDate(year,1));
d.setDate(35);
this.initData(this.formatDate(d.getFullYear(),pickYear: function(year,month) {
alert(year + "," + month);
},// 返回 类似 2016-01-02 格式的字符串
formatDate: function(year,day){
var y = year;
var m = month;
if(m<10) m = "0" + m;
var d = day;
if(d<10) d = "0" + d;
return y+"-"+m+"-"+d
},});
完整代码：
日历
CSS 日历
|
