使用 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;
// 今天是周日,放