vue实现todolist基本功能以及数据存储功能实例详解


Posted in Javascript onApril 11, 2019

实现todolist功能,具体实现如下:

可以实现对list添加、移除以及状态转变,其中添加功能既可以通过鼠标点击按钮实现,也可以通过回车键按下实现,通过使用v-model对checked的值进行双向绑定来完成状态的改变。在本次实际操作中仍存在一个小问题就是methods中函数调用,在完成数据存储前可以通过this.$options.methods.addFun();进行调用。

vue实现todolist基本功能以及数据存储功能实例详解

<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基本功能以及数据存储功能实例详解

总结

以上所述是小编给大家介绍的vue实现todolist基本功能以及数据存储功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 #Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 #Javascript
详解jQuery设置内容和属性
Apr 11 #jQuery
js作用域和作用域链及预解析
Apr 11 #Javascript
关于js陀螺仪的理解分析
Apr 11 #Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 #Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 #Javascript
You might like
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Python 时间处理datetime实例
2008/09/06 Python
用python与文件进行交互的方法
2018/03/01 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python 求10个数的平均数实例
2019/12/16 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
当当网软件测试笔试题
2015/11/24 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
工作中个人的自我评价
2013/12/31 职场文书
学校安全检查制度
2014/01/27 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
城南旧事观后感
2015/06/11 职场文书
校园新闻稿范文
2015/07/18 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA