IMWeb训练营-ToDoList

功能说明：gitHub地址：https://github.com/xinzikang/Readily-practice

  a.添加／删除任务;   

  b.筛选已完成／未完成任务，全选按钮;

  c.若所有任务都被点选，则全选按钮自动被勾选.

效果截图：

  没有内容时，任务列表项显示暂无内容

添加任务后，选中的任务表示已完成，颜色变灰，并且若所有任务都选中，则底部的全选按钮自动勾选。

  提供筛选已完成／未完成的任务功能，并显示。提供删除功能。

核心代码：

<template>
  <div id="app">
    <div class="warpper">
      <div class="title">To-Do-List</div>
      <div class="content">
        <div class="top">
          <input type="text" placeholder="请输入内容" v-model="text">
          <button  @click="addList">确定</button>
        </div>
        <div class="text-list" v-if="listShow.length">
          <ul>
            <li v-for="(item,index) in listShow" :class="{finshed:listShow[index].isFinshed}">
              <input type="checkbox" @click="tabFinshed(index)" :checked="listShow[index].isFinshed">
              {{item.text}}
            </li>
          </ul>
        </div>
        <div class="bottom" v-if="listAll.length">
          <label class="btn" @click="allChecked">
           全选<input type="checkbox" :checked="All">
          </label>
          <label class="btn" @click="finshedChecked">
            已完成<input type="checkbox" :checked="Finshed">
          </label>
          <label class="btn" @click="unFinshedChecked">
            未完成<input type="checkbox" :checked="Unfinshed">
          </label>
          <label class="btn">
            <input type="button" value="删除" @click="remove">
          </label>
        </div>
        <div class="no-list" v-if="!listShow.length">
          <p>暂时没有内容</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      All: false,
      Finshed: false,
      Unfinshed: true,
      listAll: [], //所有的list内容
      listShow: [],
      text:'' //input输入框中的内容
    }
  },
  methods: {
    addList() {
      if( this.text == ''){
        return;
      }
      let newList = {};
      newList.id = this.listAll.length;
      newList.text = this.text;
      newList.isFinshed = false;
      this.listAll.push(newList);
      if(this.Unfinshed) {
        this.listShow.push(newList);
      }
      if(this.All) {
        this.listShow.push(newList);
        this.All = false;
      } else{
        if(!this.All && !this.Finshed && !this.Unfinshed){ //三种类型都咩有打勾，则默认全选
          this.listShow.push(newList);
        }
      }

      this.text = '';
    },
    //每个list前面的选择框
    tabFinshed(index) {
      this.listShow[index].isFinshed = !this.listShow[index].isFinshed;
      this.All = true;
      this.listShow.forEach((item) => {
        if(!item.isFinshed){
          this.All = false;
        }
      })
      if(this.All){
        this.Finshed = false;
        this.Unfinshed = false;
      }
//      console.log(this.listShow[index].isFinshed);
    },
    allChecked() {
      this.All = !this.All;
      this.Finshed = false;
      this.Unfinshed =false;
      this.listShow = [];
      this.listAll.forEach((item) => {
        this.listShow.push(item);
      });
      if(this.All){
        this.listShow.forEach((item) => {
          item.isFinshed = true;
        })
      } else{
        this.listShow.forEach((item) => {
          item.isFinshed = false;
        })
      }
    },
    finshedChecked() {
      this.listShow = [];
      this.Finshed = !this.Finshed;
      this.Unfinshed =false;
      this.All = false;
      this.listAll.forEach((item) => {
        if(item.isFinshed) {
          this.listShow.push(item);
        }
      })
    },
    unFinshedChecked() {
      this.listShow = [];
      this.Unfinshed = !this.Unfinshed;
      this.All = false;
      this.Finshed = false;
      this.listAll.forEach((item) => {
        if(!item.isFinshed) {
          this.listShow.push(item);
        }
      })
    },
    remove() { //删除的bug，因为listAll是会动态变化的,所以可以采取for循环的方式，i--
      /*let a = [];
      this.listAll.forEach((item) => {
        a.push(item);
      });
      a.forEach((item,index) => {
        if(item.isFinshed) { //完成前面有对勾
          if(index == 0) {
            this.listAll.splice(index,1);
          } else{
            index -=1;
            this.listAll.splice(index,1);

          }

        }
      });*/
      let len = this.listAll.length;
      for(let i=0;i<this.listAll.length;i++){
        if(this.listAll[i].isFinshed){
          this.listAll.splice(i,1);
          i--;
        }
      }
      if(this.listAll.length === len) { //如果listAll的长度没哟变化，说明没有需要删除的项，直接推出
        return;
      }
      console.log(this.listAll);
      this.listShow = [];
      if(this.All){
        this.listAll.forEach((item) => {
          this.listShow.push(item);
        })
      }
      if(this.Finshed) {
        this.listAll.forEach((item) =>{
          if(item.isFinshed){
            this.listShow.push(item);
          }
        })
      }
      if(this.Unfinshed){
        this.listAll.forEach((item) => {
          if(!item.isFinshed){
            this.listShow.push(item);
          }
        })
      }
    }
  }
}
</script>