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 相关文章推荐
JS对文本框值的判断示例
Mar 10 Javascript
JS常用函数使用指南
Nov 23 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
DOM 高级编程
May 06 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
javascript如何定义对象数组
Jun 07 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php远程下载类分享
2016/04/13 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python编写Windows Service服务程序
2018/01/04 Python
浅谈python可视化包Bokeh
2018/02/07 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
详解python中eval函数的作用
2019/10/22 Python
医院辞职信范文
2014/01/17 职场文书
小学班主任寄语大全
2014/04/04 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2019年思想汇报
2019/06/20 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
mysql数据库如何转移到oracle
2022/12/24 MySQL