这篇文章主要为大家详细介绍了Vue.js创建Calendar日历效果的过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用 Vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 Android 里面的 DataBinding。
实现一个HTML的日历效果。
html 部分
<div id="calendar"> <!-- 年份 月份 --><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>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li style="color:red">六</li><li style="color:red">日</li></ul><!-- 日期 --><ul class="days"> <li> <!--本月--><span class="other-month">{{ day.getDate() }}</span><span> <!--今天--><span class="active">{{ day.getDate() }}</span><span>{{ day.getDate() }}</span></span></li></ul></div>
id 为 calendar 对应的创建一个 Vue 对象，设置 el 为 ‘#calendar’。
完整代码：
<title>日历</title> * { box-sizing: border-box; } ul { list-style-type: none; } body { font-family: Verdana, sans-serif; background: #E8F0F3; } #calendar{ width:80%; margin: 0 auto; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12); } .month { width: 100%; background: #00B8EC; } .month ul { margin: 0; padding: 0; display: flex; justify-content: space-between; } .year-month { display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .year-month:<a style="color:transparent">本文来源gao($daima.com搞@代@#码(网5</a>hover { background: rgba(150, 2, 12, 0.1); } .choose-year { padding-left: 20px; padding-right: 20px; } .choose-month { text-align: center; font-size: 1.5rem; } .arrow { padding: 30px; } .arrow:hover { background: rgba(100, 2, 12, 0.1); } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } .weekdays { margin: 0; padding: 10px 0; background-color: #00B8EC; display: flex; flex-wrap: wrap; color: #FFFFFF; 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 { list-style-type: none; display: inline-block; width: 14.2%; text-align: center; padding-bottom: 15px; padding-top: 15px; font-size: 1rem; color: #000; } .days li .active { padding: 6px 10px; border-radius: 50%; background: #00B8EC; color: #fff; } .days li .other-month { padding: 5px; color: gainsboro; } .days li:hover { background: #e1e1e1; } <h1>CSS 日历</h1><div id="calendar"> <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>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li style="color:red">六</li><li style="color:red">日</li></ul><ul class="days"> <li> <!--今天--><span class="other-month">{{ day.getDate() }}</span><span> <!--今天--><span class="active">{{ day.getDate() }}</span><span>{{ day.getDate() }}</span></span></li></ul></div>
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是Vue.js创建Calendar日历效果的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue.js创建Calendar日历效果
转载请注明原文链接：Vue.js创建Calendar日历效果
