vue实现todolist基本功能以及数据存储功能实例详解
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
本文通过实例代码给大家介绍了vue实现todolist基本功能以及数据存储功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
实现todolist功能，具体实现如下：
可以实现对list添加、移除以及状态转变，其中添加功能既可以通过鼠标点击按钮实现，也可以通过回车键按下实现，通过使用v-model对checked的值进行双向绑定来完成状态的改变。在本次实际操作中仍存在一个小问题就是methods中函数调用，在完成数据存储前可以通过this.$options.methods.addFun();进行调用。
<div id="app">
<input type="text" v-model="msg" @keydown="kaddFun($event)"/>
<button @click="addFun()">添加</button>
<br /><br />
<h3>进行中</h3>
<ul>
<li v-for="(item,key) in list" v-if="!item.checked"><input type="checkbox" v-model="item.checked" @change="saveList()"/> {{item.title}} <button @click="moveFun(key)">移除</button></li>
</ul>
<h3>已完成</h3>
<ul>
<li v-for="(item,key) in list" v-if="item.checked" ><input type="checkbox" v-model="item.checked"/> {{item.title}} <button @click="moveFun(key)">移除</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
msg:'',
list:[]
},
methods:{
addFun(){
this.list.push({
title:this.msg,
checked:false
}),
this.msg = '';
//存储数据
localStorage.setItem('list',JSON.stringify(this.list))
},
kaddFun(e){
if(e.keyCode==13){
this.addFun();
}
},
moveFun(key){
confirm("是否移除"+this.list[key].title+"?");
this.list.splice(key,1);
localStorage.setItem('list',JSON.stringify(this.list))
},
saveList(){
localStorage.setItem('list',JSON.stringify(this.list))
}
},
//生命周期函数 vue页面刷新就会触发的方法
mounted(){
//json字符串转成json对象
var list = JSON.parse(localStorage.getItem('list'))
//判断list是否存在
if(list){
//存在则将获取到的list保存刷新后的list中
this.list = list;
}
}
})
</script>
封装操作localstorage本地存储方法
总结
以上所述是长沙网络推广给大家介绍的vue实现todolist基本功能以及数据存储功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！