vue初學實踐之路 vue簡單日曆元件 1

2022-07-04 19:06:12 字數 2406 閱讀 8066

最近做的專案有乙個需求，需要有乙個日曆元件供預定功能使用，之前的**過於繁瑣複雜，所以我採用vue重寫了這個元件。

效果圖。

只是乙個簡單的日曆元件，所以並不需要用到node伺服器，只需要乙個html檔案即可。

專案基本目錄

首先在引入 vue.js 

<


script 


src=""


>


script


>
貼上最主要的html和js**

<


div 


id="calendar"


>


<


div 


class


="month"


>


<


ul>


<


li class


="arrow"


@click


="pickpre(currentyear,currentmonth)"


>❮


li>


<


li class


="year-month"


@click


="pickyear(currentyear,currentmonth)"


>


<


span 


class


="choose-year"


>}


span


>


<


span 


class


="choose-month"


>}月


span


>


li>


<


li class


="arrow"


@click


="picknext(currentyear,currentmonth)"


>❯


li>


ul>


div>


<


ul class


="weekdays"


>


<


li>一


li>


<


li>二


li>


<


li>三


li>


<


li>四


li>


<


li>五


li>


<


li style


="color:red"


>六


li>


<


li style


="color:red"


>日


li>


ul>


<


ul class


="days"


>


<


li 


v-for


="dayobject in days"


>


<


span 


v-if


="dayobject.day.getmonth()+1 != currentmonth"


class


="other-month"


>}


span


>


<


span 


v-else


>


<


span 


v-if


="dayobject.day.getfullyear() == new date().getfullyear() && dayobject.day.getmonth() == new date().getmonth() && dayobject.day.getdate() == new date().getdate()"


class


="active"


>}


span


>


<


span 


v-else


>}


span


>


span


>


li>


ul>


div>



核心是使用vue v-for語句建立多個標籤存放日期資訊。當點選上一月或下一月時，會觸發初始化函式，對每個中的資料進行更新，從而重新整理月。


vue的邏輯很容易理解，就是簡單的渲染data中的資料，計算日期的邏輯也不是很難。


效果圖：


vue初學實踐之路 vue簡單日曆元件 3
這一篇我們來實現管理員修改每一天剩餘數量的功能。div id calendar div id left span 要修改的日期 span li v for d in checkeddays li div v if checkeddays.length 0 label for checkedcount...


初學vue筆記
vue components元件位置在components資料夾 元件的引用 下面是元件渲染 vue也是通過a標籤跳轉頁面 元件注釋要同時注釋掉元件的引用 data的資料渲染 在data return中寫引數 引用 export default中加data 資料渲染 vue 中html css js...


Vue初學 路由
1 安裝 npm install vue router或cnpm install vue router或yarn add vue router 2 在新建router.js中引用如下 import vue from vue import vuerouter from vue router vue.u...