ToDolist案例源碼

vue

中的ToDolist案例

下面展示一些内聯代碼片。

TodoList案例參考效果：https://blog.csdn.net/p445098355/article/details/106521571      

<template>
  <div id="app">
    <nav>
      <p>TODOlist</p>

      <input type="text" placeholder="添加ToDo" v-model="value" @keydown.enter="add" />
    </nav>
    <div id="nr">
      <h3>正在進行({{nolength}})</h3>
      <table class="t1" cellspacing="0">
        <tr v-for="(item, index) in list" :key="index" v-show="!item.done">
          <td>
            <input type="checkbox" name id="chbox" @click.prevent="chang(item,true)" />
          </td>
          <td>
            <span v-show="index!=updateindex" @dblclick="update(item,index)">{{item.text}}</span>
            <input
              type="text"
              v-show="index==updateindex"
              v-model="item.text"
              @keydown.enter="updatesave"
              @keydown.esc="updateesc(item)"
            />
          </td>
          <td>{{item.time |timeFilters}}</td>
          <td>
            <span @click="del(index)">✖</span>
          </td>
        </tr>
      </table>

      <h3>已經完成({{yeslength}})</h3>
      <table class="t2" cellspacing="0">
        <tr v-for="(item, index) in list" :key="index" v-show="item.done">
          <td>
            <input type="checkbox" checked name id="chbox" @click.prevent="chang(item,false)" />
          </td>
          <td>
            <span v-show="index!=updateindex" @dblclick="update(item,index)">{{item.text}}</span>
            <input
              type="text"
              v-show="index==updateindex"
              v-model="item.text"
              @keydown.enter="updatesave"
              @keydown.esc="updateesc(item)"
            />
          </td>
          <td>{{item.time |timeFilters}}</td>
          <td>
            <span @click="del(index)">✖</span>
          </td>
        </tr>
      </table>

      <!-- 篩選 -->
      <h3>篩選</h3>
      <select v-model="sx">
        <option value>請選擇</option>
        <option value="all">全部</option>
        <option value="no">未完成</option>
        <option value="yes">已完成</option>
      </select>
      <ul>
        <li v-for="(item, index) in sxlist" :key="index">{{item.text}}</li>
      </ul>


    </div>
  </div>
</template>





<script>
export default {
  data() {
    return {
      value: "",
      list: [],
      updateindex: -1,
      tempvalue: "",
      sx: "",
      sxlist: []
    };
  },
  //監聽 篩選
  watch: {
    sx(sx) {
      let sxlist = localStorage.list;
      if (!sxlist) {
        return;
      }
      this.sxlist = [];
      let lists = JSON.parse(sxlist);
      switch (sx) {
        case "all":
          this.sxlist = lists;
          break;
        case "no":
          lists.map(item => {
            if (!item.done) {
                this.sxlist.push(item)
            }
          });

          break;
        case "yes":
            lists.map(item => {
            if (item.done) {
                this.sxlist.push(item)
            }
          });
          break;
      }
    }
  },
  //初始化
  created() {
    let list = localStorage.list;
    if (list) {
      this.list = JSON.parse(list);
    }
  },
  computed: {
    nolength() {
      let i = 0;
      this.list.map(item => {
        if (!item.done) {
          i++;
        }
      });
      return i;
    },
    yeslength() {
      let i = 0;
      this.list.map(item => {
        if (item.done) {
          i++;
        }
      });
      return i;
    }
  },
  methods: {
    // 添加
    add() {
      this.list.push({
        text: this.value,
        time: new Date().getTime(),
        done: false
      });
      this.value = "";
      this.tb(); //調用同步
      this.list.sort((a, b) => {
        //排序
        return b.time - a.time;
      });
    },
    //删除
    del(index) {
      this.list.splice(index, 1);
      this.tb(); //調用同步
    },
    //輕按兩下修改
    update(item, index) {
      this.tempvalue = item.text;
      this.updateindex = index;
    },
    updatesave() {
      //修改後儲存
      this.tb();
      this.updateindex = -1;
    },
    updateesc(item) {
      //還原
      item.text = this.tempvalue;
      this.updateindex = -1;
    },
    //複選框點選
    chang(item, checked) {
      if (checked) {
        item.done = true;
      } else {
        item.done = false;
      }
      this.tb();
      this.list.sort((a, b) => {
        //排序
        return b.time - a.time;
      });
    },
    //同步函數
    tb() {
      localStorage.list = JSON.stringify(this.list);
    }
  },
  //過濾器
  filters: {
    timeFilters(ms) {
      let data = new Date();
      let now = data.getTime();
      let rel = (now - ms) / 1000 / 60;
      let daystr = "";
      if (rel < 5) {
        daystr = "剛剛";
      } else if (rel >= 5 && rel < 10) {
        daystr = "5分鐘前";
      } else if (rel >= 10 && rel < 30) {
        daystr = "10分鐘前";
      } else if (rel >= 30 && rel < 40) {
        daystr = "30分鐘前";
      } else if (rel >= 40 && rel < 60) {
        daystr = "40分鐘前";
      } else if (rel >= 60 && rel < 120) {
        daystr = "1小時前";
      } else if (rel >= 120 && rel < 300) {
        daystr = "2小時前";
      } else if (rel >= 300 && rel < 1440) {
        daystr = "5小時前";
      } else if (rel >= 1440 && rel < 2880) {
        daystr = "1天前";
      } else if (rel >= 2880 && rel < 10080) {
        daystr = "2天前";
      } else if (rel >= 10080 && rel < 43200) {
        daystr = "7天前";
      } else if (rel >= 43200) {
        daystr = "30天前";
      }
      return daystr;
    }
  }
};
</script>




<style scoped>
body {
  margin: 0;
  padding: 0;
}

td {
  width: 200px;
}
nav {
  width: 100%;
  height: 60px;
  background: #000;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
p {
  width: 200px;
}
h3 {
  text-align: left;
}
nav input {
  width: 250px;
  height: 30px;
  border-radius: 10px;
}
#nr {
  width: 600px;
  margin: 0 auto;
}
#chbox {
  width: 20px;
  height: 20px;
}
li{
    list-style: none;
}
table{
    border:none
}
tr{
    margin: 10px 0;
}
.t1 td{
    background: white;
    border: none;
}
.t2 td{
    background: rgb(241, 238, 238);
    border: none;

}
</style>