案例知识点：

1.vue.js基础知识

2.HTML5本地存储本地存储

store.js代码

const STORAGE _ KEY=' todos-vue。js ' export default { fetch(){ return JSON。解析(窗口。本地存储。getitem(STORAGE _ KEY)| '[]')}，save(items){ window。本地存储。setitem(STORAGE _ KEY，JSON。stringify(items))；}}App.vue代码

模板div id=' app ' h1 v-text=' title '/h1输入v-model=' new item ' v-: keyup。输入=' addNew '/ul Li v-for=' items '中的项目' v-bind : class=' {成品： item。已完成} ' v-: click=' toogleFinish(item)' { { item。标签} }/Li/ul/div/模板脚本导入存储来自' ./store ' export default { name : ' app '、data () { return { title: '这是待办事项列表、items:Store.fetch()、newItem:'' }、watch : { items : { handler(items){//经过变化的数组会作为第一个参数传入商店。保存(项目)控制台。日志(存储。fetch())；}，深：树//深度复制} }，方法： { toogleFinish(item){ item。is finish=！item.isFinished }，addNew(){ this。物品。推({标签:这个。NewItem，isFinished:false，})这个。NewItem=' ' }/script style # app { font-family : ' Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}.完成{文本-装饰：下划线；}/style

总结

以上所述是小编给大家介绍的vue.js todolist实现代码，希望对的大家有所帮助！