用vue设计一个日历表

日历的功能，我们会经常用到，且逻辑比较复杂，小算法较多，花了半天时间写了个，特此详记。

先贴图

功能阐述：返回本月不多说，设置工作日和节假日是为了公司制度需要，后台会有假日表来记录。

为了适应于vue框架，很多jquery的方法用不上，例如addClass及removeClass，所以可能某些地方做的比较繁琐。

  .date {
    height: 150px;
    width:1000px;
    color: #333;
    float: left;
  }
  .button{
    float: left;
    margin-left:110px;
    margin-top:120px;
  }
  .button>div{
    margin-top:70px;

  }
  .month {
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
  }

  .weekdays {
    background-color: #20A0FF;
    opacity: 0.6;
    display: flex;
    font-size: 28px;
    margin-top: 20px;
  }

  .days {
    display: flex;
  }

  li {
    flex: 1;
    font-size: 35px;
    width:50px;
    list-style-type:none;
    text-align: center;
    margin-top: 5px;
    line-height: 60px;
    cursor:pointer;
  }
  .selected{
    display: inline-block;
    width: 60px;
    height: 60px;
    color: #fff;
    border-radius: 70%;
    background-color: #1E90FF;
  }
  .ban{
    background-image: url(image/ban.jpg);
  }
  .xiu{
    background-image: url(./image/xiu.jpg);
    background-repeat: no-repeat;
  }
  .active {
    display: inline-block;
    width: 60px;
    height: 60px;
    color: #fff;
    border-radius: 50%;
    background-color: #324057;

  }
  i{
    margin-right:30px;
    cursor:pointer
  }

  .other-month {
    color: #EEC591;
  }

以上就是用vue设计一个日历表的详细内容，更多关于vue 日历的资料请关注考高分网其它相关文章！