• 對vue沒有一絲了解的朋友可以看我的文章601Vue.js的旅程，初步認識Vue.js「601」。
• 這回我們做一個網上很多練習用的todo實例。
• 更多文章請關注我的頭條號。

一、我們開始吧，先鏈接vue庫，添加一個按鈕和一個輸入框，當然，它們都會放在一個div容器里。

二、它的項從哪里來，我們先預用列表標簽ul來給它加項吧。

三、創建vue吧，讓它綁定box。

四、我們試試看，把li里的東西替掉。

五、難道有十個數，我就們寫十行嗎，不行 ，這個得用數組，字符串數組。

六、注意了，這里就要寫入v-xxx，今后對html的操作，大多用這個v-xxx，這里我們循環寫出數組，所以用v-for。

七、可是數據是通過按鈕添加出來的，于我們得添加一個按鈕點擊事件，還是用v-xxx。

八、我們試著點擊按鈕后，取得輸入框input的值，讓輸入框關聯一個數據變量吧。

九、新手要慢慢去適應這種寫法，不難，現在我們要做的就是把input里的內容添加到數組mylist里，因為mylist已經關聯ul列表了，只要mylist變了，列表自然就變。

十、每次輸入添加后，還要刪除掉輸入框的內容，很不友好，得改改，讓輸入框在添加后清空。

---

Document 添加 {{item}}

總結

以上是生活随笔為你收集整理的js input点击事件_Vue.js的旅程，简单的todo实例「602」的全部內容，希望文章能夠幫你解決所遇到的問題。

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