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传值 判断
Oct 26 Javascript
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
vue实现页面切换滑动效果
Jun 29 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执行sql语句的写法
2009/03/10 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
简单了解Python中的几种函数
2017/11/03 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
Ruby如何定义一个类
2012/10/08 面试题
毕业生物理教师求职信
2013/10/17 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
春风行动实施方案
2014/03/28 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python