vue实现日历备忘录功能

   <title>备忘录</title> #box{ width: 469px; } /*日历*/ *{ padding: 0; margin: 0; } li{ list-style: none; } #calendar{ width:380px; margin: 40px auto 0; padding-bottom: 30px; border-bottom: 1px solid #eee; } .pickDay{ margin: 0 auto; width: 100px; height: 65px; text-align: center; } .pickDay span{ font-size: 12px; color: #989898; } .pickDay span:first-of-type{ font-size: 72px; color: #789AF7; } .month { width: 100%; } .month ul { margin: 29px 0 25px; display: flex; justify-content: center; } .year-month { width: 180px; display: flex; align-items: center; justify-content: center; } .choose-year { font-size: 14px; color: #989898; } .choose-month { text-align: center; color: #989898; font-size: 14px; } .arrow { width: 28px; height: 28px; text-align: center; } .arrow:hover { background: rgba(100, 2, 12, 0.1); cursor: pointer; } .month ul li { color: #789AF7; font-size: 20px; } .weekdays { width: 270px; margin: 0 auto 7.5px; display: flex; flex-wrap: wrap; color: #808080; justify-content: space-around; } .weekdays li { display: inline-block; font-size: 16px; color: #808080; width: 26px; text-align: center; } .days { width: 270px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-around; background: #FFFFFF; } .days li { position: relative; display: inline-block; width: 14.2%; text-align: center; padding-bottom: 7.5px; padding-top: 7.5px; color: #999; cursor: pointer; } .days .momo_mark{ position: absolute; right: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #7699F8; } .days li span{ font-size: 16px; } .days li .active { color: #789AF7; } .days li .other-month { padding: 5px; color: #E6E6E6; } .days li:hover{ color: #789AF7; } .days li:hover .other-month{ color: #789AF7; } /*备忘录*/ #memo{ width: 400px; margin: 30px 0 0 20px; } #memo h4{ text-indent: 20px; height: 20px; line-height: 20px; font-size: 14px; color: #7699F8; } .memo_list li{ margin-top: 12px; } .memo_list .memo_list_s{ width: 399px; } .memo_list .memo_list_s:hover{ background: #EEE; } .memo_list .memo_list_s:hover .circle{ background: #F84848; } .memo_list .memo_list_s:hover #edit_memo{ background: url(../assets/edit_active.png-600) no-repeat; } .memo_li<p style="color:transparent">本文来源gao!%daima.com搞$代*!码$网3</p>st .memo_list_s:hover #del_memo{ background: url(../assets/del_active.png-600) no-repeat; } .circle{ display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #7699F8; vertical-align: top; margin: 12px 5px 0px 9px; } .memo_list_mont{ display: inline-block; width: 323px; min-height: 30px; line-height: 30px; font-size: 14px; color: #666666; } .memo_operate{ display: inline-block; vertical-align: top; font-size: 0; padding-top: 9px; } .memo_operate button{ width: 12px; height: 12px; margin-right: 10px; background: #fff; border: none; } #addMemo{ width: 96px; height: 28px; line-height: 28px; color: #789BF8; background: #fff; border: 1px solid #789BF8; border-radius: 2px; margin: 25px 0 0 20px; } .memo_cont{ width: 310px; background: #7699F8; border-radius: 2px; margin-left: 20px; margin-top: 15px; padding: 37px 30px 24px 30px; } .memo_edit{ width: 100%; min-height: 140px; line-height: 28px; color: #fff; font-size: 14px; background: url(../assets/bgborder.png-600) repeat-y; outline: none; border: none; resize:none; } .edit_operate{ padding-top: 20px; display: flex; justify-content: flex-end; } .edit_operate button{ width: 20px; height: 20px; margin-left: 16px; } #cancel_edit{ background: url(../assets/error.png-600) center center no-repeat; } #save_edit{ background: url(../assets/right.png-600) center center no-repeat; } /*动画*/ .fade-enter-active, .fade-leave-active { transition: all 0.5s ease-in; } .fade-enter, .fade-leave-to{ opacity: 0; }  <div id="box"> <div id="calendar"> <div class="pickDay"> <span>{{pickDay}}</span><span>日</span></div><!-- 年份 月份 --><div class="month"> <ul> <li class="arrow">❮</li><li class="year-month"> <span class="choose-year">{{ currentYear }}</span><span class="choose-month"> - {{ currentMonth }}</span></li><li class="arrow">❯</li></ul></div><!-- 星期 --><ul class="weekdays"> <li>MO</li><li>TU</li><li>WE</li><li>TH</li><li>FR</li><li style="color:red">SA</li><li style="color:red">SU</li></ul><!-- 日期 --><ul class="days"> <li> <!--本月--><span class="momo_mark"></span><span class="other-month">{{ day.day.getDate() }}</span><span> <!--今天--><span class="active">{{ day.day.getDate() }}</span><span>{{ day.day.getDate() }}</span></span></li></ul></div><div id="memo"> <h4>备忘录</h4><ul class="memo_list"> <li> <div class="memo_list_s"> <span class="circle"></span><div class="memo_list_mont">{{memo.cont}}</div></div></li></ul></div></div>