Vue.js创建Calendar日历效果_Javascript教程-查字典教程网

Vue.js创建Calendar日历效果

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

使用 Vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 Android 里面的 DataBinding。

实现一个HTML的日历效果。

Vue.js创建Calendar日历效果1

Vue.js创建Calendar日历效果2

html 部分

<div id="calendar"> <> <div> <ul> <li @click="pickPre(currentYear,currentMonth)">❮</li> <li @click="pickYear(currentYear,currentMonth)"> <span>{{ currentYear }}</span> <span>{{ currentMonth }}月</span> </li> <li @click="pickNext(currentYear,currentMonth)">❯</li> </ul> </div> <> <ul> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> <li>日</li> </ul> <> <ul> <li @click="pick(day)" v-for="day in days"> <> <span v-if="day.getMonth()+1 != currentMonth">{{ day.getDate() }}</span> <span v-else> <> <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()">{{ day.getDate() }}</span> <span v-else>{{ day.getDate() }}</span> </span> </li> </ul> </div>

id 为 calendar 对应的创建一个 Vue 对象，设置 el 为 ‘#calendar'。

完整代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日历</title> <style type="text/css"> * { 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: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; } </style> </head> <body> <h1>CSS 日历</h1> <div id="calendar"> <div> <ul> <li @click="pickPre(currentYear,currentMonth)">❮</li> <li @click="pickYear(currentYear,currentMonth)"> <span>{{ currentYear }}</span> <span>{{ currentMonth }}月</span> </li> <li @click="pickNext(currentYear,currentMonth)">❯</li> </ul> </div> <ul> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> <li>日</li> </ul> <ul> <li @click="pick(day)" v-for="day in days"> <> <span v-if="day.getMonth()+1 != currentMonth">{{ day.getDate() }}</span> <span v-else> <> <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()">{{ day.getDate() }}</span> <span v-else>{{ day.getDate() }}</span> </span> </li> </ul> </div> <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#calendar', data: { currentDay: 1, currentMonth: 1, currentYear: 1970, currentWeek: 1, days: [], }, created: function() { this.initData(null); }, methods: { initData: function(cur) { var date; if (cur) { date = new Date(cur); } else { date = new Date(); } this.currentDay = date.getDate(); this.currentYear = date.getFullYear(); this.currentMonth = date.getMonth() + 1; this.currentWeek = date.getDay(); // 1...6,0 if (this.currentWeek == 0) { this.currentWeek = 7; } var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay); console.log("today:" + str + "," + this.currentWeek); this.days.length = 0; // 今天是周日，放在第一行第7个位置，前面6个 for (var i = this.currentWeek - 1; i >= 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 , month , 1)); d.setDate(35); this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1)); }, pickYear: function(year, month) { alert(year + "," + month); }, // 返回类似 2016-01-02 格式的字符串 formatDate: function(year,month,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 }, }, }); </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。

【Vue.js创建Calendar日历效果】相关文章：

★ jQuery实现转动随机数抽奖效果的方法

★ JQuery分屏指示器图片轮换效果实例

★ javascript搜索框效果实现方法

★ 解密效果

★ js实现带按钮的上下滚动效果

★ 日历-指定日期的新闻

★ JS+DIV实现鼠标划过切换层效果的方法

★ javascript元素动态创建实现方法

★ 对联浮动广告效果

★ jQuery插件pagewalkthrough实现引导页效果

上一篇： AngularJS中transclude用法详解

下一篇：基于vuejs+webpack的日期选择插件

学习工具