vue实现简单的日历

废话不多说直接上代码！这代码是vue2来写的，我这套代码就是一个组件，有需要的直接复制粘贴即可！

<template><!-- 外部 --><div class="waibu"><!-- 头部 --><div class="title"><span class="let" @click="shang"><</span><div>{{this.currentyear}}年{{this.currentmonth}}月{{this.currentday}}</div><span class="rig" @click="xia">></span></div><!-- 周一到周日 --><div class="zoumo"><p v-for="item in sun">{{item}}</p></div><div class="box"><!-- 上个月剩余天数 --><p class="sy" v-for="item in shanggeyue" :key="'a'+item">{{item}}</p><!-- 当前月份 --><p v-for="item in danqianyue" :key="'b'+item">{{item}}</p></div></div>
</template><script>export default {name:'rili',data() {return {sun:['周日','周一','周二','周三','周四','周五','周六'],// 当前日currentday:new Date().getDate(),// 当前月currentmonth:new Date().getMonth()+ 1,// 当前年currentyear:new Date().getFullYear()}},computed:{// 当前月的天数danqianyue(){// 有3个参数，第一个是年，第二个是月，然后输入0代表当前月份   这样就可以获取天数了return new Date(this.currentyear,this.currentmonth,0).getDate()},// 获取上个月的剩余多少天shanggeyue(){return new Date(this.currentyear,this.currentmonth -1,1).getDay()}},methods:{shang(){console.log('上个月');if(this.currentmonth === 1){this.currentyear--,this.currentmonth = 13}this.currentmonth--},xia(){console.log('下个月');if(this.currentmonth === 12){this.currentyear++,this.currentmonth = 0}this.currentmonth++}}}
</script><style scoped >.waibu{width: 500px;height: 500px;margin: 0 auto;background-color: cornflowerblue;}.title{height: 50px;background-color: cadetblue;display: flex;justify-content: space-between;}.title div{align-self: center;}.title .let,.title .rig{align-self: center;margin: 0 20px;}/* 周末 */.zoumo{display: flex;justify-content: inherit;}.zoumo p{display: flex;justify-content: center;width: calc(100% / 7);/* margin: 0 27px; */}/* 日历内容 */.box{display: flex;justify-content: inherit; flex-wrap: wrap;}.box p{display: flex;justify-content: center;width: calc(100% / 7);}/* //剩余的天数 */.sy{  visibility:hidden;}
</style>

vue实现简单的日历相关推荐

vue —— 带农历的日历功能
闲来无事做一些简单功能,一边练习VUE的使用,一边锻炼逻辑思维能力.之前有个项目需要自己写一个月份选择器,由此想起来做一个简单的日历,做起来有一些自己感兴趣的东西,也为了记录一下,发个帖首先,我做的 ...
用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
react构建淘票票webapp，及react与vue的简单比较。
前言前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
js html css淘宝足迹日历效果,js实现简单的日历显示效果函数示例
本文实例讲述了js实现简单的日历显示效果函数.分享给大家供大家参考,具体如下: 用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格 ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
java jsp中的日历表_JAVA简单的日历程序
JAVA简单的日历程序作者:未知文章来源:www.jspcn.net 发布日期:2005年01月19日 /**以下是日历的代码程序有疑问回信 ycj@18e.net **/ //Cale ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
用java写一个日历_使用JAVA写一个简单的日历
JAVA写一个简单的日历 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDa ...
【UI插件】简单的日历插件（下）—— 学习MVC思想
前言我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...
01.vue的简单实例
前段框架vue.js非常热门,每个vue应用都是通过创建vue函数创建新的vue实例开始,首先我们来创建一个简单的vue实例多手动写写代码,你会发现真的很烦躁 <!DOCTYPE html&g ...

vue实现简单的日历

vue实现简单的日历相关推荐

最新文章

热门文章