vue 实现上一周、下一周切换功能
效果图:

html 显示部分:

js 显示部分:
preNextBtn(val){
let _this = this;
this.tableList = []; //数据重置为空
_this.showTips = false; //显示loading
let fieldValue = this.yearNum;
let yearStart = new Date(parseInt(fieldValue),0,1) //设置该年1.1.
let firstDay = yearStart.getDay(); //星期
let yearEnd = new Date(parseInt(fieldValue),11,31) //设置该年12.31.
let endDay = yearEnd.getDay(); //星期
//-------------------------------------------------------------------------------------
//判断输入是否超过最大周次.
let maxWeek; //该年最大周次.1.1.在周一到周四,则为该年第一周,否则为上年最后一周.
if((firstDay>=1&&firstDay<=4)&&(endDay==0||endDay==4||endDay==5||endDay==6))
{
maxWeek = 53; //1.1.和12.31.都在本年,则该年有53周,否则52周
}else
{
maxWeek = 52;
}
if(val == "pre"){ //上一周
this.pretweek = Number(this.weekNum)-1;
if(this.pretweek <= 0){ //如果上一周小于0 ,年份减一,最大周减1
this.yearNum = Number(this.yearNum) -1;
this.pretweek = maxWeek - 1;
}
this.getTbaleData(_this.yearNum,this.pretweek)
}else{ //下一周
this.nextweek = Number(this.weekNum)+1;
if(this.nextweek>maxWeek){ //如果下一周大于当年最大周 ,年份加一,从第一周开始
this.yearNum = Number(this.yearNum)+1;
this.nextweek = 1
}
this.getTbaleData(_this.yearNum,this.nextweek)
}
},
vue 实现上一周、下一周切换功能的更多相关文章
- Unity上一页下一页切换功能实现源码(仅供参考)
在做项目时我们有时需要实现切换上一页下一页图片,切换上一首下一首歌曲等等类似的功能.这里写了个简单的实现源码(仅供参考),要是有更好的方法欢迎提出来,共同进步~ 以切换上一页下一页图片为例: usin ...
- c#上一周下一周代码
public partial class Form1 : Form { DateTime dtNow; public Form1() { InitializeComponent(); } privat ...
- 使用Charles请求跳转可作为线上和线下环境的切换
举个例子: 1.后端拿测试环境的客户端调试本地的代码 2.连接后端本地服务测试客户端和后端的交互 这样就可以改变客户端请求的测试环境换成其他的环境 一.配置 tools--Map remot... 这 ...
- 使用vue开发微信公众号下SPA站点的填坑之旅
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...
- vue图片上传
之前花了两个月用vue做了一个建筑照片我的webApp,前端就我一人,负责用vue写页面对接接口,后台一个程序员负责写接口,嵌套个安卓ios的壳.搞的是风风火火,过程也是很心累,大多不在技术,在于所谓 ...
- js 获取每月有几周,根据年月周获取该周从周一到周日的日期等方法
本文基于react-native 本人在用react-native写一个关于课程表的APP时需要课程表按照日期周期显示,网上查了许多方法,都没有达到自己想要的效果,根据一些方法的参考,再根据自己思维写 ...
- 20181023-4 Beta阶段第1周/共2周 Scrum立会报告+燃尽图 01
作业要求:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2383] 版本控制:[https://git.coding.net/lglr2 ...
- 20182310 第二周&第三周学习总结
20182310 2019-2020-1 <数据结构与面向对象程序设计>第2周&第3周学习总结 教材学习内容总结 1.首先是String类定义的字符串,然后是print和print ...
- 关于vue+axios上传文件的踩坑分析
上传文件是每个前端开发者都会遇到的问题,在之前实习期做了一个上传文件的功能,当时没有彻底搞明白问题所在,现在重新复盘下. 1.使用formData来上传文件,没有使用axios上传文件,之前在学校有做 ...
随机推荐
- windows批量删除同名进程
这里以删除chromedriver.exe 黑窗口执行命令:taskkill /F /IM chromedriver.exe 任务管理器发现,内存使用迅速指数下降
- (填坑系列) 用aio写server与client进行通信的坑
最近闲来无事,就估摸着自己写个“服务注册中心”来玩,当然因为是个人写的,所以一般都是简洁版本. 代码地址在:https://gitee.com/zhxs_code/my-service-registe ...
- Navicat Premium怎么设置字段的唯一性(UNIQUE)?
参考链接:https://blog.csdn.net/Song_JiangTao/article/details/82192189 1.打开你想要设计的表 这里写图片描述2.清楚你想要设计哪个字段为唯 ...
- Unknown CMake command "check_symbol_exists".
- Using these message generators: gencpp;geneus;genlisp;gennodejs;genpyCMake Error at CMakeLists.txt ...
- [HNOI2004] 树的计数 - prufer序列
给定树每个节点的 degree,问满足条件的树的数目. \(n\leq 150, ans \leq 10^{17}\) Solution 注意特判各种坑点 \(\sum d_i - 1 = n-2\) ...
- Vue中v-show和v-if的使用以及区别
个人博客 地址:http://www.wenhaofan.com/article/20190321143330 v-if 1.v-if 根据条件渲染,它会确保在切换过程中条件块内的组件销毁和重建 ...
- 126. 单词接龙 II
题目: 链接:https://leetcode-cn.com/problems/word-ladder-ii/ 给定两个单词(beginWord 和 endWord)和一个字典 wordList,找出 ...
- LVS+Nginx(LVS + Keepalived + Nginx安装及配置)
(也可以每个nginx都挂在上所有的应用服务器) nginx大家都在用,估计也很熟悉了,在做负载均衡时很好用,安装简单.配置简单.相关材料也特别多. lvs是国内的章文嵩博士的大作,比nginx被广 ...
- docker远程访问
查看版本 docker version 查看信息 docker info 修改配置文件 ubuntu在 /etc/default/docker centos在/usr/lib/systemd/syst ...
- ORA-00904: "I_LEVEL": invalid identifier
问题描述 ORA-00904: "I_LEVEL": invalid identifier 标示符无效