柚子快報(bào)邀請(qǐng)碼778899分享：vue.js——學(xué)習(xí)計(jì)劃表

http://yzkb.51969.com/

1）準(zhǔn)備工作

①打開D:\vue\chapter02\ learning_schedule 目錄，找到 index.html 文件。

在文件中引 入BootStrap 樣式文件，具體代碼如下

? ? ? ? 上述代碼中，第6行代碼引入Bootstrap的CSS文件，引用后即可使用Bootstrap快速 開發(fā)響應(yīng)式網(wǎng)頁，使用全局CSS樣式美化標(biāo)簽。

②修改src\App.vue文件中的默認(rèn)內(nèi)容，具體如圖所示：

至此，“學(xué)習(xí)計(jì)劃表”案例準(zhǔn)備工作已完成。

2）渲染表格區(qū)域數(shù)據(jù)

? ? ? ? 接下來正式進(jìn)入“學(xué)習(xí)計(jì)劃表”案例的開發(fā)。在App組件中編寫表格區(qū)域的頁面結(jié)構(gòu)和樣式，并在頁面上渲染表格數(shù)據(jù)，具體實(shí)現(xiàn)步驟如下。

① 在

? ? ? ? 上述代碼中，list數(shù)組表示渲染表格區(qū)域所需的數(shù)據(jù)，id屬性表示序號(hào)，subject屬性表示學(xué)習(xí)科目，content屬性表示學(xué)習(xí)內(nèi)容，place屬性表示學(xué)習(xí)地點(diǎn)，status屬性表示學(xué)習(xí)計(jì)劃的完成狀態(tài)，若屬性值為false，表示“未完成”，若屬性值為true表示“已完成”。

② 根據(jù)Bootstrap文檔找到Tables，根據(jù)實(shí)際需要合適的樣式，本案例中表格的結(jié)構(gòu)樣式具體如下。

③?接下來通過v-for指令循環(huán)渲染表格行的數(shù)據(jù)，代碼如下：

{{item.id}}

{{item.subject}}

{{item.content}}

{{item.place}}

? ? ? 第2~15行代碼通過v-for指令渲染表格行，將list數(shù)組中的數(shù)據(jù)渲染到 頁面上，每項(xiàng)必須提供一個(gè)唯一key值；第3~6行代碼將列表項(xiàng)中序號(hào)、學(xué)習(xí)科目、學(xué)習(xí)內(nèi)容、學(xué)習(xí)地點(diǎn)通過Mustache語法渲染到頁面上；第7~13行代碼將表格行渲染為 switch 開關(guān)效果，其中，第8行代碼將標(biāo)簽渲染為開關(guān)的效果，通過v-model指令 綁定綁定data中的list數(shù)組中每個(gè)對(duì)象的status屬性，第10~11行代碼通過v-if、v-else 條件渲染指令根據(jù)status屬性的屬性值渲染“已完成”或“未完成”的標(biāo)簽。

3） 實(shí)現(xiàn)學(xué)習(xí)計(jì)劃的刪除功能

? 在單擊表格行最后一列“刪除”時(shí)，可以對(duì)整行的學(xué)習(xí)計(jì)劃進(jìn)行刪除操作。在實(shí)現(xiàn)該功能時(shí)，在單擊“刪除”時(shí)，傳遞該行數(shù)據(jù)所對(duì)應(yīng)的id屬性，通過調(diào)用數(shù)組中的 filter()方法實(shí)現(xiàn)數(shù)據(jù)的過濾。在刪除學(xué)習(xí)計(jì)劃時(shí)，如果完成狀態(tài)為“未完成”時(shí)禁止刪 除，完成狀態(tài)為“已刪除”時(shí)該學(xué)習(xí)計(jì)劃可以進(jìn)行刪除操作。實(shí)現(xiàn)學(xué)習(xí)計(jì)劃刪除功能的 具體步驟如下。

① 添加標(biāo)簽、單擊事件，具體代碼如下：

刪除

②?在

運(yùn)行結(jié)果如圖：

至此，“學(xué)習(xí)計(jì)劃表”完成。

柚子快報(bào)邀請(qǐng)碼778899分享：vue.js——學(xué)習(xí)計(jì)劃表

http://yzkb.51969.com/

相關(guān)閱讀