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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
Vue.js对象转换实例
Jun 07 Javascript
vue2单元测试环境搭建
May 24 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php 文件上传实例代码
2012/04/19 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
vue cli 全面解析
2018/02/28 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python创建和使用字典实例详解
2013/11/01 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
详解Python 切片语法
2019/06/10 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
python如何停止递归
2020/09/09 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
教你打造完美的创业计划书
2014/01/06 职场文书
《开国大典》教学反思
2014/04/19 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
通知范文怎么写
2015/04/16 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书