Day 22 Todo list

今天将会介绍简易的todo list

功能

• 新增事项(push将输入值放入阵列)
• Enter加入资料(.enter)
• 删除事项(splice)
• 计算代办事项件数(阵列长度)

范例

• 下面是TodoList的HTML,type=”text”设定为输入框,加上.enter当按下enter便能直接触发新增,以v-model双向绑定值为”newTodo”,当输入框输入文字便直接更新newTodo
• 设定下方代办事项栏位,显示计算的件数{{todos.length}}
• 当data更新,v-for回圈触发,更新todo.content
• 将新增删除功能写入methods,删除中以index指定删除阵列值
  
  

这里是做出来的结果,可以在输入框内加入新事项会显示在代办事项的下方,当有代办事项时,便会计算出有多少是向代办(以{{todos.length}}表示)
最後是删除按钮,当代办事项删完时计算便会归零

补充

Placeholder=””→可在将文字显示输入框後

首次用Vue做出来的todolist,做的过程中发现并没有想像中的复杂,下次可以再新增更多功能,像是修改内容、标示完成未完成之类的

参考资料: https://www.youtube.com/watch?v=8O3teHziU_E