Vue实现todolist localStorage 时间过滤

<template>
  <div>
    <input type="text" v-model="inputVal" @keyup.13="add" />

    <!-- 未完成 -->
    <h4>未完成</h4>
    <ul>
      <li v-for="(item,index) in nolist" :key="index">
        <!-- .prevent 阻止默认事件 -->
        <input type="checkbox" @click.prevent="changeTa(item,index)" />

        <span v-if="item.isShow" @dblclick="update(item,false)">{{item.val}}</span>
        <!--  双击修改的input框 v-model="item.val" 为当前的数据
        v-if="!item.isShow" 默认隐藏
        @blur="update(item,true)" 失去焦点的时候 更新操作(item:当前的值, true:消失)-->
        <input type="text" v-model="item.val" v-if="!item.isShow" @blur="update(item,true)" />
        <br />
        <!-- 加时间的过滤器  -->
        <span>{{item.times | timeFilter}}</span>
        <br />
      </li>
    </ul>
    共有{{nolist.length}}条数据未完成
    <!-- 已完成 -->
    <h4>已完成</h4>
    <ul>
      <li v-for="(item,index) in oklist" :key="index">
        <input type="checkbox" @click.prevent="changeTaNo(item)" checked />
        <span v-if="item.isShow" @dblclick="update(item,false)">{{item.val}}</span>
        <input type="text" v-model="item.val" v-if="!item.isShow" @blur="update(item,true)" />
        <br />
        <span>{{item.times |timeFilter}}</span>
        <br />
      </li>
    </ul>
    共有{{oklist.length}}条数据已完成
  </div>
</template>

<script>
export default {
  filters: {
    //过滤器 用来过滤时间
    timeFilter(ms) {
      let now = new Date().getTime(); //声明一个现在的 时间 转化为毫秒
      let cha = now - ms; //获得差值
      // 1000毫秒/60秒/60分钟/24小时/30天
      let months = cha / 1000 / 60 / 60 / 24 / 30;
      let week = cha / 1000 / 60 / 60 / 24 / 7;
      let days = cha / 1000 / 60 / 60 / 24;
      let hours = cha / 1000 / 60 / 24;
      let minutes = cha / 1000 / 60;
      let str = "";
      if (months > 1) {
        str = `${parseInt(months)} 月之前`;
      } else if (week > 1) {
        str = `${parseInt(week)} 周之前`;
      } else if (days > 1) {
        str = `${parseInt(days)} 天之前`;
      } else if (hours > 1) {
        str = `${parseInt(hours)} 小时之前`;
      } else if (minutes > 1) {
        str = `${parseInt(minutes)}分钟之前`;
      } else {
        str = "刚刚";
      }
      return str;
    }
  },
  data() {
    return {
      inputVal: "",
      oklist: [], //已完成的数据
      nolist: [], //未完成的数据
      isShow: true
    };
  },
  created() {
    //生命周期  渲染之前执行
    var rel = localStorage.noLv; //从localStorage 中获取 未执行的数据 onLV
    var rel2 = localStorage.okLv; //从localStorage 中获取 已经执行的的数据 okLv
    if (rel != undefined) {
      //如果是第一次输入，之前是没有值的，会有错误 ，先判断一下
      this.nolist = JSON.parse(rel); // JSON.parse 转化为对象
    }
    if (rel2 != undefined) {
      this.oklist = JSON.parse(rel2);
    }
  },
  methods: {
    add() {
      if (!this.inputVal) return; //输入框为空 return
      this.nolist.push({
        val: this.inputVal,
        times: new Date().getTime(),
        isShow: true //添加一个默认的isShow
      });
      this.inputVal = "";
      //本地存储 和setItem一样  只能存储字符串,所以转化一下
      localStorage.noLv = JSON.stringify(this.nolist);
      localStorage.okLv = JSON.stringify(this.oklist);
    },
    update(item, isShow) {
      //双击更新数据
      item.isShow = isShow;
    },
    //点击未完成的输入框,
    changeTa(item, index) {
      this.oklist.push(item); //添加到已完成的数组中
      this.nolist.splice(index, 1); //从未完成的数组中删除此数据
      localStorage.okLv = JSON.stringify(this.oklist); //同步更新
      localStorage.noLv = JSON.stringify(this.nolist); //同步更新
    },
    //点击已完成的输入框，
    changeTaNo(item, index) {
      this.nolist.push(item); //添加到未完成的数组
      this.oklist.splice(index, 1); //从已完成的数组中删除
      localStorage.okLv = JSON.stringify(this.oklist); //同步更新
      localStorage.noLv = JSON.stringify(this.nolist); //同步更新
    }
  }
};
</script>

<style>
</style>

知识点： 时间过滤 本地存储
注意：
本地存储只能存字符串 ：JSON.stringify()
从本地存储读取出来数据要转化为对象 : JSON.parse()

filters: {
    //过滤器 用来过滤时间
    timeFilter(ms) {
      let now = new Date().getTime(); //声明一个现在的 时间 转化为毫秒
      let cha = now - ms; //获得差值
      // 1000毫秒/60秒/60分钟/24小时/30天
      let months = cha / 1000 / 60 / 60 / 24 / 30;
      let week = cha / 1000 / 60 / 60 / 24 / 7;
      let days = cha / 1000 / 60 / 60 / 24;
      let hours = cha / 1000 / 60 / 24;
      let minutes = cha / 1000 / 60;
      let str = "";
      if (months > 1) {
        str = `${parseInt(months)} 月之前`;
      } else if (week > 1) {
        str = `${parseInt(week)} 周之前`;
      } else if (days > 1) {
        str = `${parseInt(days)} 天之前`;
      } else if (hours > 1) {
        str = `${parseInt(hours)} 小时之前`;
      } else if (minutes > 1) {
        str = `${parseInt(minutes)}分钟之前`;
      } else {
        str = "刚刚";
      }
      return str;
    }
  },