vue框架制作TodoList
阿新 • • 發佈：2017-09-02
htm input -m log 學習 inpu meta ext html
在初步學習了vue之後，我們可以使用vue的基礎知識來實現一個todolist列表，主要功能是通過一個輸入框來輸入，然後將輸入的內容同步的顯示在頁面上，當點擊其中的一項時，出現一條下劃線。
首先列出在實現功能的過程中需要使用的一些vue語法。
1.因為要實現雙向綁定，所以需要使用v-model。
2.涉及到循環渲染列表，需要使用v-for。
3.要實現點擊事件，所以在列表上要通過v-on綁定點擊事件。
4.點擊時要在列表上添加或者會刪除類名，從而控制下劃線樣式，所以要使用v-bind後面接{}的形式來判斷是否顯示類名。
接下來是實現代碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script> <style> .underline{ text-decoration: underline; } </style> </head> <body> <div id="todoList"> <h1 v-text="msg"></h1> <input type="text" v-model="newItem" @keyup.enter="doAddNew"/> <ul> <li v-for="item in items" v-text="item.label" @click="finished(item)" :class="{underline:item.isFinished}"></li> </ul> </div> </body> <script> new Vue({ el:"#todoList", data:{ items:[], newItem:‘‘, msg:"TodoList" }, methods:{ doAddNew: function () { this.items.push({ label:this.newItem, isFinished:false }); this.newItem = ‘‘; }, finished: function (item) { item.isFinished = !item.isFinished; } } }); </script> </html>
vue框架制作TodoList