<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>日历</title>

     <style>

 * {

   padding: 0;

   margin: 0;

 }

 ul {

   list-style-type: none;

 }

 #calendar {

   width: 450px;

   height: 300px;

   margin: 100px auto;

   border-radius: 2px;

   box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),

     0 1px 3px 0 rgba(0, 0, 0, 0.12);

 }

 .title {

   font-size: 20px;

   letter-spacing: 3px;

   display: flex;

   justify-content: space-between;

   background-color: #ed8079;

   color: #ffffff;

 }

 .title .arrow {

   padding: 20px;

   cursor: pointer;

 }

 .year-month {

   display: flex;

   flex-direction: column;

   align-items: center;

   justify-content: space-around;

 }

 .weekdays {

   margin: 0;

   padding: 10px 0;

   display: flex;

   flex-wrap: wrap;

   justify-content: space-around;

 }

 .weekdays li {

   display: inline-block;

   width: 13.6%;

   text-align: center;

 }

 .days {

   padding: 0;

   background: #ffffff;

   margin: 0;

   display: flex;

   flex-wrap: wrap;

   justify-content: space-around;

 }

 .days li {

   display: inline-block;

   width: 14.2%;

   text-align: center;

   padding-bottom: 8px;

   padding-top: 8px;

 }

 .days li .active {

   padding: 4px 10px;

   border-radius: 50%;

   background: #ed8079;

   color: #fff;

 }

 .days li .other {

   padding: 5px;

   color: gainsboro;

 }

 .days li:hover {

   background: #e1e1e1;

 }

 </style>

 </head>

 <body>

     <div id="calendar">

         <!-- 标题 -->

         <div class="title">

             <div class="arrow"

             @click="changeMonth('pre')"

             > ❮ </div>

             <div class="year-month">

                 <span>{{currentYear}}年{{currentMonth}}月</span>

             </div>

             <div class="arrow"

              @click="changeMonth('next')"

              > ❯ </div>

         </div>

         <!-- 星期行 -->

         <ul class="weekdays">

             <li

             v-for='(val,key) in weeks'

             >

             <span :style='chooseStyle(key)'>

                 {{val}}

             </span>

             </li>

         </ul>

         <!-- 日期 -->

         <ul class="days">

             <li

             v-for='(val,key) in days'

             >

                 <span

                 :class='chooseClass(val.day)'

                 >

                 {{val.day.getDate()}}</span>

             </li>

         </ul>

     </div>

     <script src="../vue.js"></script>

 <script>

 new Vue({

   el: "#calendar",

   data: {

     currentDay: 1,

     currentMonth: 1,

     currentYear: 1970,

     currentWeek: 1,

     weeks: ["一", "二", "三", "四", "五", "六", "日"],

     days: []

   },

   created() {

     this.init();

   },

   methods: {

     init(data) {

       let day;

       if (data) {

         day = new Date(data);

       } else {

         let now = new Date();

         day = new Date(this.formDate(now.getFullYear(), now.getMonth() + 1, 1));

       }

       this.currentDay = day.getDate();

       this.currentYear = day.getFullYear();

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

       this.currentWeek = day.getDay();

       if (!this.currentWeek) {

         this.currentWeek = 7;

       }

       this.days.length = 0;

       let str = this.formDate(

         this.currentYear,

         this.currentMonth,

         this.currentDay

       );

       for (let i = 2 - this.currentWeek ; i < 37 - this.currentWeek; i++) {

         let d = new Date(str);

         d.setDate(i);

         this.days.push({

           day: d

         });

       }

       // //获取上月末至本月第一天的日期

       //   for (let i = this.currentWeek - 1; i >= 0; i--) {

       //     let d = new Date(str);

       //     d.setDate(d.getDate() - i);

       //     this.days.push({

       //       day: d

       //     });

       //   }

       // //获取剩余的日期

       //   for (let i = 1; i <= 35 - this.currentWeek; i++) {

       //     let d = new Date(str);

       //     d.setDate(d.getDate() + i);

       //     this.days.push({

       //       day: d

       //     });

       //   }

     },

     //其他月加class名'other'，今天加class名'active'

     chooseClass(day) {

       if (day.getMonth() + 1 != this.currentMonth) return "other";

       let a = new Date() - day;

       if (a > 0 && a < 86400000) return "active";

     },

     //改变周六日显示颜色

     chooseStyle(key) {

       if (key === 5 || key === 6) return "color:#f1aaab";

     },

     //切换月份

     changeMonth(a) {

       let d = new Date(this.formDate(this.currentYear, this.currentMonth, 1));

       // setDate(0); 上月最后一天

       // setDate(-1); 上月倒数第二天

       // setDate(n) 参数n为 上月最后一天的前后n天

       a === "pre" ? d.setDate(0) : d.setDate(35);

       this.init(this.formDate(d.getFullYear(), d.getMonth() + 1, 1));

     },

     //返回字符串个格式的日期

     formDate(year, month, day) {

       return year + "-" + month + "-" + day;

     }

   }

 });

 </script>

 </body>

 </html>

vue实现简单日历的更多相关文章

  1. 基于Vue的简单日历组件

    日历组件 由于移动端项目中需要用到日历组件,网上找了下,没看到几个合适的,就尝试着自己写一个.然后发现也不是很复杂,目前只做了最基本的功能,大家也可以拿去做做二次开发. 如何写一个日历组件 基础效果如 ...

  2. js编写当天简单日历

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...

  3. js超简单日历

    用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...

  4. react构建淘票票webapp，及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  5. vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  6. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  8. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  9. 沉淀，再出发：VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

随机推荐

  1. MT【268】投篮第一次很重要

    已知 $r_1=0,r_{100}=0.85,(r_k$ 表示投 k 次投中的概率.)求证:(1)是否存在$n_0$使得$r_{n_0}=0.5$ (2)是否存在$n_1$使得$r_{n_1}=0.8 ...

  2. 谈谈IE针对Ajax请求结果的缓存

    在默认情况下,IE会针对请求地址缓存Ajax请求的结果.换句话说,在缓存过期之前,针对相同地址发起的多个Ajax请求,只有第一次会真正发送到服务端.在某些情况下,这种默认的缓存机制并不是我们希望的(比 ...

  3. 【HDU - 4341】Gold miner（分组背包）

    BUPT2017 wintertraining(15) #8B 题意 给出每个黄金的坐标.价值及耗时,同一方向的黄金只能依次取,求T时间内收获的最大值. 题解 同一方向,物品前缀和构成的组合,相当于是 ...

  4. ssh-keygen适用场景与rsync使用id_rsa技巧

    ssh-keygen工具可以实现免密码登录服务器可参考之前的blog:http://www.cnblogs.com/Mrhuangrui/p/4565333.html写的比较粗糙 原理说明使用ssh- ...

  5. IIS最小配置

    目的 : IIS按需要配置练习      测试环境 IIS 10  WIN10 1.安装IIS与建立网站 安装IIS略,服务器版用添加角色,用户版添加删除WINDOWS组件. 装好IIS之后,建一个网 ...

  6. SAM练习记录

    SAM练习记录 洛谷 P1368 工艺 其实是最小表示法裸题 倍长后建SAM跑最小的边走|S|步即可 Code CF 235 C. Cyclical Quest 对主串建SAM 然后每个串倍长,跑的时 ...

  7. 「ZJOI2015」地震后的幻想乡 解题报告

    「ZJOI2015」地震后的幻想乡 想了半天,打开洛谷题解一看,最高票是_rqy的,一堆密密麻麻的积分差点把我吓跑. 据说有三种解法,然而我只学会了一种最辣鸡的凡人解法. 题意:给一个无向图\(G\) ...

  8. 老铁，告别postman，用pycharm来调接口，顺便把接口脚本也写了

    最近,一位同事在用postman调涉及到依赖的接口的时候 postman设置了环境变量,但是老是获取不到依赖接口返回的值,至于的啥原因呢,@#￥%……&*()! 其实,用pycharm一样可以 ...

  9. [Vani有约会]雨天的尾巴（树上差分+线段树合并）

    首先村落里的一共有n座房屋,并形成一个树状结构.然后救济粮分m次发放,每次选择两个房屋(x,y),然后对于x到y的路径上(含x和y)每座房子里发放一袋z类型的救济粮. 然后深绘里想知道,当所有的救济粮 ...

  10. centos7搭建ELK Cluster集群日志分析平台（三）：Kibana

    续  centos7搭建ELK Cluster集群日志分析平台(一) 续  centos7搭建ELK Cluster集群日志分析平台(二) 已经安装好elasticsearch 5.4集群和logst ...