按如下方式实现todolist功能：

可以实现列表的添加、删除和状态转换，其中添加功能可以通过鼠标点击按钮或按回车键来实现，状态改变可以通过将勾选值与v型双向绑定来完成。这个实际操作中还有一个小问题，就是方法中的函数调用可以通过这个传递。$options.methods.addFun()在数据存储完成之前；打个电话。

Div id=' app '输入类型=' text ' v-model=' msg ' @ Key down=' kaddfun($ event)'/button @ click=' addfun()' add/button br/br/h3in progress/h3ul liv-for=' item . checked '输入类型=' checkbox ' v-model=' item . checked ' @ change=' save list()'/{ { item . title } } button @ click=' movefun(Key)' remove/button/Li/ul H3完成/H3 ul Li-v选中“输入类型=”复选框“v-model=”项。选中了“/{{item。title } } button @ click=' move fun(key)' remove/button/Li/ul/div script src=' http :3359 cdn . jsdeliver . net/NPM/Vue/dist/Vue . js '/script script type=' text/JavaScript ' var app=new Vue({ El : ' # app '，data:{ msg: ' '，list:[] }，methods:{ addFun())//存储数据localstorage.setitem ('list '，JSON.stringfy (this.list))}，kadd fun(e){ if(e . key code==13){ this . addfun()；} }，moveFun(键){确认('是否要删除'此. list[键]。标题？);this.list.splice(键，1)；localStorage.setItem('list '、JSON.stringify(this.list)) }、save list(){ local storage . setitem(' list '、JSON.stringify(this.list)) }、//刷新生命周期函数vue页面时触发的方法mounted(){//将JSON字符串转换为JSON对象varlist=JSON . parse(local storage . getitem(' list ')))//判断列表中是否存在(list){//将得到的列表保存在刷新后的列表中。}} }) /script封装了localstorage本地存储方法的操作

摘要

以上就是边肖介绍的vue实现的todolist的基本功能和数据存储功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！