Vue.js创建Calendar日历效果

使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding。 实现一个HTML的日历效果

html 部分

      {{ day.getDate() }}

    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 },});

    完整代码

    <Meta charset="UTF-8"> 日历

    CSS 日历

      {{ day.getDate() }}

    本文已被整理到了《》,欢迎大家学习阅读。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    相关文章

    问题现象 elmentui的el-tree数据加载问题,导致第一次加载选中当前节点和高亮当前节点没有生效。 解决方...
    因为刚打开文件,vscode默认是预览状态,如果编辑过之后,就不会有这个问题。 可以通过双击将预览状态接...
    前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下这篇文章。 h...
    在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_eslint-loader@2...
    问题产生 在使用babel编译es6时,遇到报错Uncaught ReferenceError: regeneratorRuntime is not define...
    父组件的编写 &amp;lt;a:orgCode=orgCode &amp;gt;&amp;lt;/a&amp;gt; 在data里面增加...