這一篇我們來實現管理員修改每一天剩餘數量的功能。
<div
id="calendar"
>
<
div
id="left"
>
<
span
> 要修改的日期
span
>
<
li v-for
="d in checkeddays"
>}
li>
<
div
v-if
="checkeddays.length!=0"
>
<
label
for="checkedcount"
>要修改的天數
label
>
<
input
id="checkedcount"
v-model
="checkedcount"
>
<
button
>確定修改
button
>
div>
div>
<
div
id="right"
>
<
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"
>日
我們在data中加入了checkeddays陣列，用來存放我們所選定的日期，因為我們不需要修改checkdays陣列中的值，所以不使用物件陣列的方式。
checkedcount為預設修改20天的剩餘數量。
頁面效果為：
這樣我們就實現了管理員修改日期的功能，剩下所做的就是與伺服器互動的過程了。
到這裡日曆預定元件的功能就算完成了。
將這個小組件做完，我們的vue基礎知識已經不錯了。
vue初學實踐之路 vue簡單日曆元件 1
最近做的專案有乙個需求，需要有乙個日曆元件供預定功能使用，之前的 過於繁瑣複雜，所以我採用vue重寫了這個元件。效果圖。只是乙個簡單的日曆元件，所以並不需要用到node伺服器，只需要乙個html檔案即可。專案基本目錄 首先在引入 vue.js script src script 貼上最主要的html...
初學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...