柚子快報邀請碼778899分享：vue.js制作學(xué)習(xí)計劃表案例
通俗易懂，完成“學(xué)習(xí)計劃表”用于對學(xué)習(xí)計劃進(jìn)行管理，包括對學(xué)習(xí)計劃進(jìn)行添加、刪除、修改等操作。
一. 初始頁面效果展示
二.添加學(xué)習(xí)計劃頁面效果展示
?三.修改學(xué)習(xí)計劃完成狀態(tài)的頁面效果展示
四.刪除學(xué)習(xí)計劃?
當(dāng)學(xué)習(xí)計劃處于“已完成”狀態(tài)時，學(xué)生可以對學(xué)習(xí)計劃進(jìn)行刪除操作，否則不能進(jìn)行刪除操作。
在html案例引入樣式：
新建 llk.vue文件
在llk.vue文件中寫入代碼：
學(xué)習(xí)計劃表
| 序號 | 學(xué)習(xí)科目 | 學(xué)習(xí)內(nèi)容 | 學(xué)習(xí)地點 | 完成狀態(tài) | 操作 |
|---|---|---|---|---|---|
| {{ item.id }} | {{ item.subject }} | {{ item.content }} | {{ item.place }} | v-model="item.status" /> |
找到main.js文件修改 成自己新建的名字
?
運行結(jié)果：
輸入科目學(xué)習(xí)內(nèi)容，選擇學(xué)習(xí)地點進(jìn)行添加
?
今天就分享到這里，感謝預(yù)覽~?
柚子快報邀請碼778899分享：vue.js制作學(xué)習(xí)計劃表案例
精彩文章
評論可見，查看隱藏內(nèi)容
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
美客多精英
