介绍为什么要使用Vue & lt; template>
,& lt; div 类=癲ate"比;
,,& lt; !——,年份,月份,——比;
,,& lt; div 类=癿onth"比;
,,,& lt; p> {{, currentYear }}年{{,currentMonth }}月& lt;/p>
,,& lt;/div>
,,& lt; !——,星期,——比;
,,& lt; ul 类=皐eekdays"比;
,,,& lt; li>一& lt;/li>
,,,& lt; li>二& lt;/li>
,,,& lt; li>三& lt;/li>
,,,& lt; li>四& lt;/li>
,,,& lt; li>五& lt;/li>
,,,& lt; li>六& lt;/li>
,,,& lt; li>日& lt;/li>
,,& lt;/ul>
,,& lt; !——,日期,——比;
,,& lt; ul 类=癲ays"比;
,,,& lt; li @click=把≡?天)“,v=?天,指数),拷贝days",:关键=癷ndex"比;
,,,,& lt; !——本月——比;
,,,,& lt; span v=癲ay.getMonth () + 1, !=, currentMonth",类=皁ther-month"在{{,day.getDate (),}} & lt;/span>
,,,,& lt; span v-else>
,,,,& lt; !——今天——比;
,,,,& lt; span v=癲ay.getFullYear (),==, new 日期().getFullYear (),,,, day.getMonth (),==, new 日期().getMonth (),,,, day.getDate (),==, new 日期().getDate()“,类=癮ctive"在{{,day.getDate (),}} & lt;/span>
,,,,& lt; span v-else> {{, day.getDate (),}} & lt;/span>
,,,,& lt;/span>
,,,& lt;/li>
,,& lt;/ul>
,& lt;/div>
& lt;/template> & lt; script>
,export default {
,,名字:& # 39;日期# 39;
data 才能;(),{
,,return {
,,,currentYear:, 1970,,,//,年份
,,,currentMonth:, 1,,//,月份
,,,currentDay:, 1,,,//,日期
,,,currentWeek:, 1,,,//,星期
:,,,天,[],
,,}
,,},
mounted 才能;(),{
,,},
created 才能;(),{
,,this.initData(空)
,,},
方法:才能,{
,,formatDate (年,月,日),{
,,,const y =,
,,,let m =,
,,,if (& lt; m 10), m =, ' 0 $ {m} '
,,,let d =,
,,,if (& lt; d 10), d =, ' 0 $ {d} '
,,,return “$ {y} - {m} - {d}’美元
,,},
,,initData (坏蛋),{
,,,let date =, & # 39; & # 39;
,,,if (坏蛋),{
,,,,date =, new 日期(坏蛋)
,,,},{else
,,,,date =, new 日期()
,,,}
,,,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
,,,}
,,,const str =, this.formatDate (this.currentYear, this.currentMonth,, this.currentDay)//,今日日期,年——月——日
,,,this.days.length =0
,,,//,今天是周日,放在第一行第7个位置,前6个面,这里默认显示一周,如果需要显示一个月,则第二个循环为,i<=35个女人;this.currentWeek
,,,/*,eslint-disabled */null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍基于Vue如何实现支持按周切换的日历,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。
基于Vue的日历小功能,可根据实际开发情况按每年,每月,每周,进行切换,具体内容如下
js部分:目前默认显示一周,可根据实际情况更改
