Vue 完成代办事项

模块封装缓存的代码

export default {
    setStorage(key,value){
        localStorage.setItem(key,value);
    },
    getStorage(key){
        return JSON.parse(localStorage.getItem(key));
    },
    removeStorage(key){
        return localStorage.removeItem("key");
    },
    clearStorage(){
        localStorage.clear();
    }
}

App.vue

<template>
  <div id="app">
    <div class="title">
      <span>ToDo List</span>
      <div class="title-ipt">
        <label>添加事项：</label>
        <input type="text" placeholder="输入事项..." v-model="usertext" @keypress="userKeyDown" />
        <button @click="addData">添加</button>
      </div>
    </div>
    <!--下面的事项-->
    <div class="content">
      <ul>
        <li class="li-name">未完成事项</li>
        <li class="li-info">
          <!--会产生一个空的div解决方案是使用那个vue的过滤器-->
          <!--这里在加载的时候 只是渲染false-->
          <div v-for="(item,index) in selectData(false)" :key="index">
            <div v-if="!item.isfinish">
              <input type="checkbox" @click="changeStatus(index)" :checked="item.isfinish" />
              <span>{{item.name}}</span>
              <a href="javascript:void(0)" @click="removedata(index)">------移除</a>
            </div>
          </div>
        </li>
        <li class="li-name">已完成事项</li>
        <li class="li-info">
          <div v-for="(item,index) in selectData(true)" :key="index">
            <div v-if="item.isfinish">
              <input type="checkbox" @click="changeStatus(index)" :checked="item.isfinish" />
              <span>{{item.name}}</span>
              <a href="javascript:void(0)" @click="removeData(index)">------移除</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//使用storage html5缓存
//如何做js模块化封装
//storage模块化封装
//使用封装的storage
import storage from "./storage/storage.js";
export default {
  name: "app",
  data() {
    return {
      usertext: "",
      list: []
    };
  },
  //用来读取缓存
  mounted() {
    //自带方法 组件挂载完成之后去执行这个方法
    //读取写入的缓存
    this.list = storage.getStorage("msg");
    if (!this.list) {
      this.list = [];
    }
  },
  methods: {
    addData() {
      if (!this.usertext.length) {
        alert("请输入事项...");
      }
      //事件调用的方法
      console.log(this.usertext);
      //构建一个json对象
      let json = {
        name: this.usertext,
        isfinish: false
      };
      this.list.push(json);
      this.usertext = "";
      //写入缓存
      storage.setStorage("msg", JSON.stringify(this.list));
    },
    changeStatus(index) {
      //修改索引对应的状态
      this.list[index].isfinish = !this.list[index].isfinish;
      //写入缓存
      storage.setStorage("msg", JSON.stringify(this.list));
    },
    removeData(index) {
      //根据传递的索引移除数据
      this.list.splice(index, 1);
      //写入缓存
      storage.setStorage("msg", JSON.stringify(this.list));
    },
    userKeyDown(e) {
      let code = e.which || e.charCode;
      //调用上面添加的方法
      if (code === 13) {
        this.addData();
      }
    },
    selectData(istrue) {
      //做一个过滤数据
      //进行数据的过滤 in遍历的对象
      //该方法得返回一个对象
      if (!this.list) {
        return [];
      }
      return this.list.filter((val, index) => {
        return val.isfinish === istrue;
      });
    }
  }
};
</script>

<style>
#app {
  width: 1000px;
  height: auto;
  margin: auto;
  padding: 0.5rem 1rem;
}
.title {
  font-size: 1.5rem;
  padding: 1rem 0;
}
.title > span {
  margin: 0 3rem;
  font-size: 3rem;
  vertical-align: middle;
}
.title-ipt {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
}
.title-ipt > input {
  width: 300px;
  outline: none;
  border-radius: 10px;
  border: 1px solid #c0c0c0;
  line-height: 30px;
  height: 30px;
  box-sizing: border-box;
  padding-left: 10px;
}
.title-ipt > button {
  width: 100px;
  height: 30px;
  outline: none;
}
.content {
  width: 800px;
  height: auto;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 1rem 3rem;
}
.li-name {
  font-weight: 600;
  font-size: 1rem;
}
.li-info {
  font-size: 0.8rem;
  margin: 0.6rem 0;
  list-style: none;
}
.li-info > input {
  position: relative;
  top: 3px;
}
.li-info > div {
  margin: 0 0.5rem;
}
.li-info a {
  float: right;
}
</style>