待办事项案例

#首页 #

<template>
  <div class="todo">
      <div class="main">
      <div class="top">
          <span style="color:#fff">TODOList</span>
          <span><input type="text"
           v-model="value"
           @keypress.enter="add"
           ></span>
        </div>
        <div>
            <h3>正在进行（{{nolist}}）</h3>
            <ul>
                <li v-for="(item,index) in list" 
                :key="index" 
                v-show="!item.is"
                >
                    <input type="checkbox" @click.prevent="sadd(item)">
                    <span @dblclick="dblist(item,index)"
                     v-show="index != isceuu"
                     class="ap"
                     >
                     {{item.val}}
                     </span>
                    <span v-show="index == isceuu" class="ap" >
                      <input type="text"
                       @keydown.enter="updata"
                       @keydown.esc="back(item)"
                        @blur="updata"
                         v-model="item.val">
                      </span> 
                    <button @click="del(index)">删除</button>
                    </li>
            </ul>
        </div>
        <div>
            <h3>已完成（{{yeslist}}）</h3>
            <ul>
                <li v-for="(item,index) in list" 
                :key="index"
                v-show="item.is"
                 class="bg"
                >
                    <input type="checkbox" checked @click.prevent="yadd(item)">
                    <span class="ap">{{item.val}}</span>
                     <button @click="del(index)">删除</button>
                    </li>
            </ul>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            value:"",
            list:[],
            isceuu:-1,
            itemval:""
        }
    },
    created(){
        let todolist=localStorage.todolist;
        if(this.list){
            this.list=JSON.parse(todolist)
        }
    },
    computed:{
        nolist(){
            let num=0
            this.list.map(item=>{
                if(!item.is){
                num++;
                }
            })
            return num
        },
         yeslist(){
            let num=0
            this.list.map(item=>{
                if(item.is){
                num++;
                }
            })
            return num
        }
    },
    methods:{
        add(){
            this.list.push({
                val:this.value,
                is:false
            })
            this.value=""
            this.save()
        },
        sadd(item){
            item.is=true;
            this.save()
        },
        yadd(item){
            item.is=false;
            this.save()
        },
        del(index){
            this.list.splice(index,1)
            this.save()
        },
        dblist(item,index){
            this.isceuu=index;
            this.itemval=item.val
            this.save()
        },
        updata(){
            this.isceuu = -1
            this.save()
        },
        back(item){
            item.val=this.itemval
            this.itemval="";
            this.isceuu = -1
        },
        save(){
            localStorage.todolist=JSON.stringify(this.list)
        }
    }
}
</script>

<style scoped>
.todo{
    width: 100%;
    height: 580px;
    background: #CDCDCD;
}
.main{
    width: 100%;
    background: #CDCDCD;
}
    .top{
        width: 100%;
        height: 50px;
        background-color: #323232;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    ul li{
        list-style: none;
        line-height: 25px;
        box-sizing: border-box;
        padding: 5px;
        background: #FFFFFF;
        margin: 5px 25%;
        width: 50%;
        border-left:5px solid #629A9C ;
    }
    .bg{
        background-color: #E6E6E6;
        border-left:5px solid #B3B3B3 ;
       
    }
    span{
        margin-left: 20px;
       
    }
   .ap{
        cursor: move;
         display: inline-block;
        width: 300px;
        text-align: left;
        color: #000000;
   }

</style>

赛选页

  <div>
    筛选：
      <select v-model="sel">
          <option value="0">请选择</option>
          <option value="1">所有任务</option>
          <option value="2">已完成</option>
          <option value="3">未完成</option>
      </select>
      搜索：
      <input type="text" v-model="kw" @keydown.enter="sraech">
      <h3>筛选结果：</h3>
      <ul>
          <li v-for="(item,index) in lists" :key="index">{{item.val}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            sel:"0",
            list:[],
            lists:[],
            kw:""
        }
    },
    watch:{
        sel(vals){
            console.log(vals)
            this.lists=[]
            switch(vals){
                case "0":
                 this.lists=[];
                 break;
                  case "1":
                      this.lists=this.list
                 break;
                  case "2":
                        this.list.map(item=>{
                            if(item.is){
                                this.lists.push(item)
                            }
                        })
                 break;
                  case "3":
                       this.list.map(item=>{
                            if(!item.is){
                                this.lists.push(item)
                            }
                        })
                 break;
            }
        }
    },
    created(){
        let list=localStorage.todolist
        if(list){
            this.list=JSON.parse(list)
        }
    },
    methods:{
        sraech(){
              this.lists=[];
              this.list.map(item=>{
                  if(item.val.includes(this.kw)){
                      this.lists.push(item)
                  }
              })
              this.kw=""
        }
    }

}
</script>

<style>

</style>