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 相关文章推荐
javascript eval函数深入认识
Feb 21 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
JS如何生成动态列表
Sep 22 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python实现汽车管理系统
2018/11/30 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Python列表list操作相关知识小结
2020/01/29 Python
python调用私有属性的方法总结
2020/07/24 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
读书之星事迹材料
2014/05/12 职场文书
公司离职证明样本
2014/09/13 职场文书
打架检讨书
2015/01/27 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript