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 相关文章推荐
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
Angular实现的进度条功能示例
Feb 18 Javascript
在vue项目中,使用axios跨域处理
Mar 07 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获取网站域名和地址的代码
2008/08/17 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python字典的值可以修改吗
2020/06/29 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
文员自我评价怎么写
2013/09/19 职场文书
英语文学专业学生的自我评价
2013/10/31 职场文书
歌唱比赛主持词
2014/03/18 职场文书
验房委托书
2014/08/30 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android