Vue初探-日期选择器

2024年5月5日 152次阅读 来源: 海岛心hey

之前用jquery用面向对象的要领完成过日期挑选器，最近在演习vue，现在用vue完成一遍。发明vue用数据驱动的体式格局来完成，觉得还不错。

需求设定

1.完成一个日期挑选器，默许显现，today高亮显现。
2.能够点击上一月、下一月举行日期跳转。
3.点击某一天能够拿到日期

思绪剖析

之前用jquery完成的时刻能够会斟酌将dom封装到js中，在js中拼接html字符串，在页面挪用的处所直接援用。斟酌到vue能够举行组件式开辟，日期组件完全能够零丁提掏出一个vue文件，所以这里直接将dom写在html中，开辟时可写在template里。

完成日期挑选有两个比较症结的要领：1.猎取当月天数，以便轮回遍历若干天。2.猎取当月第一天是礼拜几，以便肯定第一天显现在那里。

在编写组件时，我们挑选保护三个变量nowYear,nowMonth,nowDate,即vue实例上挂在确当前年、月、日。

在举行数据初始化，也能够看作组件初始化显现时，首先为这三个变量附初值

var date = new Date();
this.nowYear = date.getFullYear();
this.nowMonth = date.getMonth();
this.nowDate = date.getDate();

然后，将传统要领中的init函数，也就是本来的dom拼接函数，在这里仅仅操纵一个数组，即保护一个数组days,存储须要显现确当月日期数据。

一样我们运用vue体统的@click能够很轻易的绑定事宜，然后举行days的更新。当days更新时，vue的watcher就会发明并通知dom更新，运用Vm.$nextTick要领，实行回调函数。即

this.$nextTick(() => {
  this.nowDate();
  this.init();
})

结果演示

现在只完成到需求设定的水平，于现实运用能够稍有差异，能够理解下思绪，使用时自行完成

demo:(http://fehey.com/Vue-items/vu…
源码：github源码

博客：(http://fehey.com/)迎接前端小伙伴交换斧正~

    原文作者：海岛心hey
    原文地址: https://segmentfault.com/a/1190000007699553
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞