vue 日历翻拍效果_Vue.js创建Calendar日历效果

使用 Vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 Android 里面的 DataBinding。

实现一个HTML的日历效果。

html 部分

• ❮

• { { currentYear }}

  { { currentMonth }}月

• ❯

• 一
• 二
• 三
• 四
• 五
• 六
• 日

• { { day.getDate() }}

  { { day.getDate() }}

  { { day.getDate() }}

id 为 calendar 对应的创建一个 Vue 对象，设置 el 为 ‘#calendar'。

new Vue({

el: '#calendar',

data: {

currentDay: 1,

currentMonth: 1,

currentYear: 1970,

currentWeek: 1,

days: [],

},

created: function() {

this.initData(null);

},

methods: {

initData: function(cur) {

var date;

if (cur) {

date = new Date(cur);

} else {

date = new Date();

}

this.currentDay = date.getDate();

this.currentYear = date.getFullYear();

this.currentMonth = date.getMonth() + 1;

this.currentWeek = date.getDay(); // 1...6,0

if (this.currentWeek == 0) {

this.currentWeek = 7;

}

var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);

console.log("today:" + str + "," + this.currentWeek);

this.days.length = 0;

// 今天是周日，放