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上传文件,之前在学校有做 ...
随机推荐
- 通过nginx实现多个域名访问同一个服务器
一台服务器通过nginx配置多个域名(80端口) 参考:https://www.cnblogs.com/ruanjianlaowang/p/11182486.html 1. 问题描述 多个域名对应一 ...
- Dijkstra算法依据项目改进版,输出路径
package dijkstra; import java.util.ArrayList; public class Dijkstra { ; /*private static int[][] Gra ...
- abp demo运行1
1.从官方网站下载demo 如下: https://aspnetboilerplate.com/Templates 填写响应的信息,下载demo 2.vs2017打开demo,如下图: 3.安装.ne ...
- 数据升级包 - bin文件
运行完升级包后,正常的现象 开头: 结尾:
- jsp中引用的jstl 和fmt标签-详解
JSTL 核心标签库标签共有13个,功能上分为4类: 1.表达式控制标签:out.set.remove.catch 2.流程控制标签:if.choose.when.otherwise 3.循环标签:f ...
- mysql 数据库基础操作
一 知识储备 MySQL数据库基本操作知识储备 数据库服务器:一台计算机(对内存要求比较高) 数据库管理系统:如mysql,是一个软件 数据库:oldboy_stu,相当于文件夹 表:student, ...
- 【Unity|C#】基础篇(3)——类(class)/ 接口(interface)
[学习资料] <C#图解教程>(第4~7章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu ...
- 注册登录于一体的 用户登录注册界面(php)
<!DOCTYPE HTML><html> <head> <script type="text/javascript" src=" ...
- flask入门(二)
接着上文 讲一讲响应 flask调用视图函数后,会将其返回值作为响应的内容.大多数情况下,响应就是一个简单的字符串,作为HTML页面回送客户端.但HTTP协议需要的不仅是作为请求响应的字符串.HTTP ...
- 将图片中的一部分图片用ps进行旋转
先用选择工具选择你要进行变动的那部分图像,至于选择的方法有多种而且得看你的图片来决定采取何种选择方法.然后在英文输入状态下按下“CTRL+T”出现变换框,你将鼠标移动对角点上,当鼠标变为一种旋转的图标 ...