vue实现本地存储添加删除修改功能

 更新时间:2021年11月25日 16:15   作者:温L
这篇文章主要为大家详细介绍了vue实现本地存储添加删除修改功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现本地存储添加删除修改的具体代码,供大家参考,具体内容如下

实现功能:

输入的内容添加到正在进行列表中,

双击修改功能,

点击esc键,取消,还是之前的内容,

点击回车,修改成功,

修改框失焦时修改成功,

选中按钮时进入已完成列表,未选中时在正在进行中列表,

点击删除进行删除当行,

本地存储下次打开上次添加的还在

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  *{
   padding: 0;margin: 0;
  }
   ul{
    list-style: none;
   }
   li{
    width: 220px;
    height: 40px;
    border: 1px solid gainsboro;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #6CE26C;
   }
   .del{
    margin-right: 5px;
    border: none;
    width: 20px;
    height: 20px;
    background-color: #008200;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <!-- 过滤输入内容首尾空白符 -->
   <!-- 回车事件 -->
   <input type="text" v-model.trim="temp" @keyup.enter="additem()"/>
   <!-- 获取正在进行的数量 -->
   <h3>正在进行中{{undolist.length}}</h3>
   <ul class="list">
    <!-- 将正在进行的内容遍历显示出来 -->
    <li class="item" v-for="item in undolist" :key="item.name">
     <div class="">
      <!-- 多选框为未选中false状态 -->
     <input type="checkbox" v-model="item.done" />
     <!-- 默认为state是0,当双击时state为1,内容赋给tempEdit-->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- input框内容为tempEdit的值,state=1时显示输入框,
     点击esc时state为零隐藏,内容还是原来的值,不进行修改,
     当回车时state为0就隐藏input框,将修改过得tempEdit,赋给item.name
     当失焦时state为0就隐藏input框,将修改过得tempEdit,赋给item.name
      -->
     <input type="text" v-model="tempEdit" v-show="item.state==1" 
     @keyup.esc="item.state=0;tempEdit=item.name"
     @keyup.enter="item.state=0;item.name=tempEdit"
     @blur="item.state=0;item.name=tempEdit"
     />
     </div>
     <!-- 点击删除时删除其内容 -->
     <button type="button" @click="removeitem(item)" class="del">X</button>
    </li>
   </ul>
   <!-- 已完成数量 -->
   <h3>已经完成{{doneList.length}}</h3>
   <ul class="list">
    <!-- 将已完成的内容遍历显示出来 -->
    <li class="item" v-for="item in doneList" :key="item.name">
     <div class="">
      <!-- 多选框为选中true状态 -->
     <input type="checkbox" v-model="item.done" />
     <!-- 默认为state是0,当双击时state为1,内容赋给tempEdit-->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- input框内容为tempEdit的值,state=1时显示输入框,
     点击esc时state为零隐藏,内容还是原来的值,不进行修改,
     当回车时state为0就隐藏input框,将修改过得tempEdit,赋给item.name
     当失焦时state为0就隐藏input框,将修改过得tempEdit,赋给item.name
      -->
     <input type="text" v-model="tempEdit" v-show="item.state==1" 
     @keyup.esc="item.state=0;tempEdit=item.name"
     @keyup.enter="item.state=0;item.name=tempEdit;"
     @blur="item.state=0;item.name=tempEdit;"
     />
     </div>
     <!-- 点击删除时删除其内容 -->
     <button type="button" @click="removeitem(item)" class="del">X</button>
    </li>
   </ul>
  </div>
 </body>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  var vm=new Vue({
   el:"#app",
   data(){
    return{
     // 清单列表
     // getItem是获取本地存储数据,
     // ||"[]"如果获取不到转换为空的数组
     list:JSON.parse(localStorage.getItem("list")||"[]"),
     // 临时添加的数据存放处
     temp:'',
     // 修改框的临时数据存放处
     tempEdit:''
    }
   },
   methods:{
    // 添加
    additem(){
     // 文本框为空时就返回
     if(this.temp===""){return;}
     // 添加到后面
     this.list.push({
      name:this.temp,
      done:false,
      state:0
     })
     // 清空临时框
     this.temp="";
    },
    // 删除
    removeitem(item){
     // 弹框
     var flag=window.confirm("确定要删除吗?");
     if(flag){
      // 查找符合条件元素的索引值
      var ind=this.list.findIndex(value=>value.title===item.title);
      // splice从第ind删除一个
      this.list.splice(ind,1);
     }
    }
   },
   computed:{
    // 通过计算把现有的list数据计算出已完成和未完成
    // 未完成
    undolist(){
     // filter数组的过来函数,如果返回结果为真则当前遍历的数据保留
     // 否则就会被过滤掉
     return this.list.filter(item=>!item.done);
     
    },
    // 已完成
    doneList(){
     return this.list.filter(item=>item.done);
    }
   },
   watch:{
    "list":{
     handler(){
      // setItem设置本地数据
      // JSON.stringify把js对象转换为json字符串
      // JSON.prase把字符串转换为js对象
      localStorage.setItem("list",JSON.stringify(this.list))
     },
     deep:true,
    }
   }
  })
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。

原文出处:https://blog.csdn.net/lwf0829/article/details/121502600

相关文章

  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09
  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
  • 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23
  • vue实现同时设置多个倒计时

    这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
  • 详解Vue Cli浏览器兼容性实践

    这篇文章主要介绍了详解Vue Cli浏览器兼容性实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
  • vue 实现用户登录方式的切换功能

    这篇文章主要介绍了vue 实现用户登录方式的切换功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-04-14
  • vue router路由参数刷新消失问题的解决方法

    这篇文章主要介绍了vue-router路由参数刷新消失的问题...2017-06-24
  • vue2实现provide inject传递响应式

    在看element-ui的源码的时候,注意到源码里面有很多地方使用provide和inject的属性,本文主要介绍了vue2实现provide inject传递响应式,分享给大家,感兴趣的可以了解一下...2021-05-22
  • vue项目,代码提交至码云,iconfont的用法说明

    这篇文章主要介绍了vue项目,代码提交至码云,iconfont的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-30
  • vue接口请求加密实例

    这篇文章主要介绍了vue接口请求加密实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
  • Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)

    本篇文章给大家介绍基于postrender机制使用Vue+Openlayer批量设置闪烁点的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-09-01
  • WebStorm无法正确识别Vue3组合式API的解决方案

    这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-18
  • Vue初始化中的选项合并之initInternalComponent详解

    这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-11
  • vue实现从外部修改组件内部的变量的值

    这篇文章主要介绍了vue实现从外部修改组件内部的变量的值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-31
  • Vue实现动态查询规则生成组件

    今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
  • vue中使用element日历组件的示例代码

    这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
  • 简单实现Vue的observer和watcher

    这篇文章主要教大家如何简单实现Vue的observer和watcher,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-31
  • 浅谈vue生命周期共有几个阶段?分别是什么?

    这篇文章主要介绍了浅谈vue生命周期共有几个阶段?分别是什么?具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-07
  • vue+element ui实现锚点定位

    这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29