作者：HelloGitHub-追夢人物

追夢人物的 Vue 系列教程在他的博客已經全部更新完成，地址：

https://www.zmrenwu.com/courses/vue2x-todo-tutorial/

注意：追夢的博客在國外所以訪問速度慢，需要耐心等待一下。本號將不再連載本系列，望周知。

UI

我們先來寫好 Todo 應用的 HTML 文檔模板，然后再用 Vue 來操作模板中的數據。由于我們的重點在 Vue 的學習，因此 Todo 應用的 UI 采用了極簡風格設計。可以看到模板的代碼量非常少，如果加入過多的 CSS 樣式，在教程中代碼看起來就會非常混亂。

HelloVue Todo Tutorial

• 學習 Vue
• 整個牛項目
• 迎娶白富美走上人生巔峰

剩余 3 項未完成 ---篩選：

請復制上述代碼到一個 HTML 文件然后使用瀏覽器打開，你就可以看到界面了。

不過目前還只有 UI，我們接下來將使用 Vue 一步步實現以下完整的功能：

• 在頂部輸入框輸入內容，按回車鍵添加 todo
• 全部 todo 列表顯示在輸入框下方的列表
• 將單個 todo 標為完成
• 刪除單個 todo
• 雙擊 todo 進行編輯，按 esc 鍵取消編輯
• 下方顯示未完成的 todo 數量
• 可通過篩選按鈕篩選未完成的 todo、已完成的 todo 等
• 可一次性將全部 todo 標為完成，可一次性清除全部已完成 todo，或者一次性清除全部 todo。
• 其它更加豐富的功能

接下來就讓我們一個一個以 Vue 的方式來實現它們吧！

todo 列表

在上面的模板代碼中，todo 列表的值都是我們直接寫在 HTML 文檔里的。合理的情況應該是根據用戶添加和刪除 todo 時動態地顯示全部內容，這就要交給 Vue 了。當然，第一步是要先構建 Vue 的實例，注意這個實例目前是沒有綁定任何數據的，其 data 是一個空函數，不返回任何有用的數據：

...

我們現在還沒有實現用戶添加 todo 的功能，我們先做個弊，假設用戶已經輸入了一些 todo，存在一個 todos 列表里，現在需要將 Vue 實例和這個 todos 綁定：

var app = new Vue({
el: '#todo-app',
data: function () {
return {
todos: [
{id: 0, title: '學習 Vue'},
{id: 1, title: '整個牛項目'},
{id: 2, title: '迎娶白富美走上人生巔峰'},
]
}
},
})

現在每一個 todo 都是一個對象，它有 id 和 title 兩個屬性，id 用來唯一標識這個 todo。然后我們就在模板中循環顯示這個 todos 列表，Vue 中循環指令用 v-for：

...

• {{ todo.title }}

...

注意到 v-for='todo in todos' 這種寫法，其含義就是循環 todos 列表，將列表的每一項保存到 todo 變量，循環渲染 li 元素的內容。特別注意我們還給 li 元素綁定了一個 key 屬性，這將告訴 Vue 每個渲染的 li 元素都是不同的，因為 id 不同。

你可以刪除或者添加 todos 列表中的元素，然后刷新瀏覽器，可以看到頁面渲染的內容會跟著變化。你也可以在按 F12 進入瀏覽器的調試窗口，在命令行(console)輸入命令：

app.todos = [
{id: 1, title: '整個牛項目'},
{id: 2, title: '迎娶白富美(或走上人生巔峰)'},
]

這個 app 是我們創建的 Vue 實例的名字，然后引用它綁定的數據 todos，我們給它賦了一個新的值，你會實時地看到瀏覽器渲染的結果變化了。Vue 就是這么神奇！

顯然，人工為 todos 列表添加數據是一點也不好玩的，我們希望在上方的輸入框輸入想要添加的 todo，然后按回車就自動給我們添加 todo，接下來我們就來實現它。

追夢人物的 Vue 系列教程在他的博客已經全部更新完成，地址：

https://www.zmrenwu.com/courses/vue2x-todo-tutorial/

注意：追夢的博客在國外所以訪問速度慢，需要耐心等待一下。HelloGitHub 公眾號將不再連載本系列，望周知。

總結

以上是生活随笔為你收集整理的for循环一定要指定键么 vue_第 2 篇：上手 Vue 展示 todo 列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。