柚子快報邀請碼778899分享：vue.js——學習計劃表

http://yzkb.51969.com/

1）準備工作

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

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

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

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

至此，“學習計劃表”案例準備工作已完成。

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

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

① 在

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

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

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

{{item.id}}

{{item.subject}}

{{item.content}}

{{item.place}}

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

3） 實現(xiàn)學習計劃的刪除功能

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

① 添加標簽、單擊事件，具體代碼如下：

刪除

②?在

運行結果如圖：

至此，“學習計劃表”完成。

柚子快報邀請碼778899分享：vue.js——學習計劃表

http://yzkb.51969.com/

相關閱讀