亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

Vue初探-日期選擇器

MAX_zuo / 3084人閱讀

摘要：之前用用面向?qū)ο蟮姆椒▽?shí)現(xiàn)過(guò)日期選擇器，最近在練習(xí)，現(xiàn)在用實(shí)現(xiàn)一遍。需求設(shè)定實(shí)現(xiàn)一個(gè)日期選擇器，默認(rèn)顯示，高亮顯示。能夠點(diǎn)擊上一月下一月進(jìn)行日期跳轉(zhuǎn)。實(shí)現(xiàn)日期選擇有兩個(gè)比較關(guān)鍵的方法獲取當(dāng)月天數(shù)，以便循環(huán)遍歷多少天。

之前用jquery用面向?qū)ο蟮姆椒▽?shí)現(xiàn)過(guò)日期選擇器，最近在練習(xí)vue，現(xiàn)在用vue實(shí)現(xiàn)一遍。發(fā)現(xiàn)vue用數(shù)據(jù)驅(qū)動(dòng)的方式來(lái)實(shí)現(xiàn)，感覺(jué)還不錯(cuò)。

需求設(shè)定 
1.實(shí)現(xiàn)一個(gè)日期選擇器，默認(rèn)顯示，today高亮顯示。
2.能夠點(diǎn)擊上一月、下一月進(jìn)行日期跳轉(zhuǎn)。
3.點(diǎn)擊某一天能夠拿到日期
思路分析

之前用jquery實(shí)現(xiàn)的時(shí)候可能會(huì)考慮將dom封裝到j(luò)s中，在js中拼接html字符串，在頁(yè)面調(diào)用的地方直接引用?？紤]到vue可以進(jìn)行組件式開(kāi)發(fā)，日期組件完全可以多帶帶提取出一個(gè)vue文件，所以這里直接將dom寫(xiě)在html中，開(kāi)發(fā)時(shí)可寫(xiě)在template里。

實(shí)現(xiàn)日期選擇有兩個(gè)比較關(guān)鍵的方法：1.獲取當(dāng)月天數(shù)，以便循環(huán)遍歷多少天。2.獲取當(dāng)月第一天是星期幾，以便確定第一天顯示在哪里。

在編寫(xiě)組件時(shí)，我們選擇維護(hù)三個(gè)變量nowYear,nowMonth,nowDate,即vue實(shí)例上掛在的當(dāng)前年、月、日。

在進(jìn)行數(shù)據(jù)初始化，也可以看做組件初始化顯示時(shí)，首先為這三個(gè)變量附初值

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

然后，將傳統(tǒng)方法中的init函數(shù)，也就是原來(lái)的dom拼接函數(shù)，在這里僅僅操作一個(gè)數(shù)組，即維護(hù)一個(gè)數(shù)組days,存儲(chǔ)需要顯示的當(dāng)月日期數(shù)據(jù)。

同樣我們利用vue體統(tǒng)的@click可以很方便的綁定事件，然后進(jìn)行days的更新。當(dāng)days更新時(shí)，vue的watcher就會(huì)發(fā)現(xiàn)并告訴dom更新，利用Vm.$nextTick方法，執(zhí)行回調(diào)函數(shù)。即

this.$nextTick(() => {
  this.nowDate();
  this.init();
})
效果演示

目前只實(shí)現(xiàn)到需求設(shè)定的程度，于實(shí)際應(yīng)用可能稍有差距，可以理解下思路，使用時(shí)自行實(shí)現(xiàn)

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

博客：(http://fehey.com/)歡迎前端小伙伴交流指正~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91253.html

相關(guān)文章

  • vue初探--編寫(xiě)表格組件

    摘要：容器里面包含部分，其一為提供過(guò)濾器的入口其二為表格組件。數(shù)據(jù)綁定，簡(jiǎn)寫(xiě)形式為在父組件和子組件的通訊中，必須要在子組件里面聲明。如果是編寫(xiě)則必須是注冊(cè)組件的語(yǔ)法糖。下次還是上動(dòng)圖吧以后基本上碰到這種使用表格呈現(xiàn)數(shù)據(jù)的組件。 在項(xiàng)目當(dāng)中，經(jīng)常會(huì)有表格組件，包含2部分，其一為table-header,其二為table-content 然后在這個(gè)小demo里面涉及到了vue的個(gè)別指令: v-f...

    dabai 評(píng)論0 收藏0

  • gulp和webpack初探

    摘要：首先聲明一下，和兩者關(guān)系不大，主要是團(tuán)隊(duì)之前一直用構(gòu)建工具，這幾天業(yè)務(wù)上比較清閑，老大讓我學(xué)學(xué)新的和這些潮流工具，于是草草研究了一天，記一些筆記。最后使用將各個(gè)組件打包在一起。 首先聲明一下，gulp和webpack兩者關(guān)系不大，主要是團(tuán)隊(duì)之前一直用grunt構(gòu)建工具，這幾天業(yè)務(wù)上比較清閑，老大讓我學(xué)學(xué)新的gulp和webpack這些潮流工具，于是草草研究了一天，記一些筆記。 gulp...

    jhhfft 評(píng)論0 收藏0

  • 初探vue-cli 3.0

    摘要：當(dāng)你將一系列的特性選擇完畢后最后回提示你是否將已選項(xiàng)保存成一個(gè)快速將來(lái)可復(fù)用的當(dāng)你選擇保存時(shí)，被保存的將會(huì)存在用戶(hù)的目錄下一個(gè)名為的文件里。 準(zhǔn)備工作 npm install -g @vue/cli or yarn global add @vue/cli 安裝需要Node.js8.9以上版本，安裝完成后可以通過(guò)vue --version來(lái)驗(yàn)證是否安裝成功 項(xiàng)目創(chuàng)建 vue create...

    superPershing 評(píng)論0 收藏0

  • vue 手寫(xiě)一個(gè)時(shí)間選擇器

    摘要：實(shí)現(xiàn)代碼于文章末尾處構(gòu)思頁(yè)面結(jié)構(gòu)組件由輸入框和日歷面板組成，寫(xiě)好頁(yè)面主體結(jié)構(gòu)。輸入框點(diǎn)擊顯示或隱藏日歷面板方法改變布爾值控制日歷面板的顯示隱藏。同時(shí)，當(dāng)組件銷(xiāo)毀時(shí)，也要及時(shí)清除該監(jiān)聽(tīng)器。 最近研究了 DatePicker 的實(shí)現(xiàn)原理后做了一個(gè) vue 的 DatePicker 組件，今天帶大家一步一步實(shí)現(xiàn) DatePicker 的 vue 組件。 原理 DatePicker 的原理是—...

    sf_wangchong 評(píng)論0 收藏0

  • 開(kāi)發(fā)中遇到的問(wèn)題總結(jié)

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    wenshi11019 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<