好的,過這幾章我們又多學了幾個語法,今天這章再來做一個實作吧~
今天要實作的項目待辦事項清單(To Do List),今天我們實作一個簡單版的,大致上我們的需求如下:
我們這次的需求就是最簡單的上面 4 項。
我想輸入這個對各位應該是非常熟悉了,來看一下程式碼吧:
我們建立一個 input 並且使用 v-model 雙向綁定到 data 上的 newToDo。
<body>
<div id="app">
<input type="text" v-model="newTodo">
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
newTodo: '',
},
})
</script>
好的,我們有了一個可以輸入的地方之後接下來就是要可以把輸入欄裡面的內容新增囉,這部分我們要做 2 件事情:
todos
的空陣列。至於要怎麼將輸入欄的資料新增進去 todos 的陣列裡面呢?!
就使用 push 吧,這是原生 JS 的語法,能夠將資料插入陣列的最後面。
<body>
<div id="app">
<input type="text" v-model="newTodo">
<button @click="addToDo">Add</button>
{{newTodo}} => {{todos}} //只是為了看效果的
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addToDo() {
this.todos.push(this.newTodo);
this.newTodo = ''; //將輸入欄清空
}
}
})
</script>
我們能夠將輸入欄新增進去陣列之後,接下來就是將這個待辦事項清單渲染出來囉~
這部分我們就使用前一章介紹的 v-for
來處理吧。
下面我們就建立一個 ul
以及li
, 然後對 li 做 v-for 渲染
<body>
<div id="app">
<input type="text" v-model="newTodo">
<button @click="addToDo">Add</button>
<ul>
<li v-for="todo in todos">{{todo}}</li>
</ul>
</div>
</body>
我們終於到最後一個功能啦~
我們要實作刪除的功能,首先當然是先建立一個刪除鈕在每個 todo 裡
接下來我們要在按鈕上綁定一個事件去刪除 todo,但是要怎麼刪除呢?!
我們就使用 splice 做刪除吧。
splice 會帶 3 個參數 splice(start, deleteCount, items)
所以我們要刪除當下的 todo 就給它前 2 個參數,start 傳入的就是當下的 index,deleteCount 就給 1 吧,因為我們只要刪除一個。
<body>
<div id="app">
<input type="text" v-model="newTodo">
<button @click="addToDo">Add</button>
<ul>
<li v-for="(todo, index) in todos">{{todo}}
<button @click="removeToDo(index)">Remove</button>
</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addToDo() {
this.todos.push(this.newTodo);
this.newTodo = '';
},
removeToDo(index) {
this.todos.splice(index, 1)
}
}
})
</script>
最終的結果就是這樣啦:
做一個待辦事項清單是不是很簡單呀~
明天繼續介紹其他內容囉~