Vue待办事件 实时留言事件

vue待办事项

在这里插入代码片<template>
  <div class="about">
    <input type="text" v-model="inputvalue" />

    <button @click="submit">提交</button>
    <h3>未完成 ({{nolist.length}})</h3>

    <ul id="q1">
      <li v-for="(item,index) in nolist" :key="index">
        <input type="checkbox" @click.prevent="changeYes($event,item,index)" />
        {{item.text}} &nbsp;&nbsp; {{item.time|timeFilter}}&nbsp;&nbsp;
        <button
          @click="update(index)"
        >修改</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="del(index)">删除</button>
      </li>
    </ul>
    <h3>已完成 ({{yeslist.length}})</h3>
    <ul>
      <li v-for="(item,index) in yeslist" :key="index">
        <input checked type="checkbox" @click.prevent="changeNo($event,item,index)" />

        {{item.text}} &nbsp;&nbsp;{{item.time|timeFilter}}&nbsp;&nbsp;
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  filters: {
    timeFilter(ms) {
      let dayStr = "";
      let date = new Date();
      let now = date.getTime();

      let rel = (now - ms) / 1000 / 60;

      if (rel <= 1) {
        dayStr = "刚刚";
      } else if (rel <= 3) {
        dayStr = "2分钟前";
      }
      return dayStr;
    }
  },

  data() {
    return {
      inputvalue: "",
      yeslist: [],
      nolist: []
    };
  },
  methods: {
    submit() {
      this.nolist.push({
        text: this.inputvalue,
        time: new Date().getTime()
      });
      this.inputvalue = "";
      // localStorage.yeslist = JSON.stringify(this.yeslist); //同步数据
    },
    changeYes(e, item, index) {
      let checked = e.target.checked;
      if (checked) {
        this.yeslist.push(item);
        this.nolist.splice(index, 1);
      }
      
    },
    changeNo(e, item, index) {
      let checked = e.target.checked;
      if (!checked) {
        this.nolist.push(item);
        this.yeslist.splice(index, 1);
      }
    },
    update(index) {
      let val = window.prompt("输入内容：");
      let obj = this.nolist[index];
      obj.text = val;
      this.nolist.splice(index, 1, obj);
    },
    del(index) {
      this.nolist.splice(index, 1);
    },
    getParseTime(ms) {
      let date = new Date();
      date.setTime(ms);
      let timeStr = `${date.getFullYear()}-${date.getMoth() + 1}-${
        date.getDate
      }${date.getHours()}:
                ${date.getMinutes()}:
                ${date.getSeconds()}`;
      return timeStr;
    }
    // created() {
    //   let yeslist = localStorage.yeslist;
    //   if (yeslist !== undefined) {
    //     this.yeslist = JSON.parse(yeslist);
    //   }
    // }
  }
};
</script>
<style lang="stylus" scoped></style>

Vue 待办事项 真实提交实时时间`

template>
  <div id="root">
    <input type="text" v-model="inputvalue"  id="inputvalue" @keydown.enter="submit">
    <button @click="submit" >提交</button>
    <ul id="q1">
<li
      v-for="(item,index) in list"
        :key="index"
      >{{item.text}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.time|timeFilter}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputvalue: "",
      list: []
    };
  },
  filters: {
    timeFilter(ms) {
      let datStr = "";
      let date = new Date(); //获取当前时间
      let now = date.getTime();
      let rel = (now - ms) / 1000 / 60; //单位分钟
      if (rel <= 1) {
        datStr = "刚刚";
      } else if (rel <= 2) {
        datStr = "1分钟前";
      } else if (rel <= 3) {
        datStr = "2分钟前";
      } else if (rel <= 5) {
        datStr = "4分钟前";
      } else{
          datStr="把我存了这么久快把我拿走吧"
      }
      return datStr;
    }
  },

  created() {
    //初始化方法
    let list = localStorage.list;
    if (list != undefined) {
      this.list = JSON.parse(list);
    }
  },

  methods: {
    submit() {
      this.list.push({
        text: this.inputvalue,
        time: new Date().getTime()
      });
      this.inputvalue = "";

      localStorage.list = JSON.stringify(this.list); //同步保存数据
    }
  }
};
</script>

<style>
</style>