Vue实战案例todolist

效果图

<template>
  <div id="app">
      <div class="containter">
        <div class="cardfa">


        
          <div class="card" style="width: 40rem;">
            <div class="card-header">
              <h2>你还有{{sum}}件事情没做!!!</h2>
              <input type="text" v-model="addthing" @keyup.enter="add">
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item" v-for="(item, index) in filterList" :key="index" @dblclick="cur=item">
                <div class="d-flex justify-content-between">
                    <div>
                      <input type="text" v-show="cur==item" v-focus="cur==item" v-model="item.title" @keyup.enter="cur=''" @blur="cur=''">
                      <span v-show="cur!=item" >
                               <input type="checkbox" class="align-middle" v-model="item.isSelected">
                               <span :class="['ml-2','align-middle',item.isSelected?activeClass:'']">{{item.title}}</span>
                      </span>
                            
                    </div>
                   
                    <div class="">
                      <button class="btn btn-danger btn-sm" @click="del(item)">删除</button>
                    </div>
                </div>
                
                
                  
                </li>

            </ul>

            <div class="card-body">

                    <a href="#/all" :class="[{'card-link':isActive},{'px-3':isActive}, {'py-1':isActive} ,{'rounded':isActive} ,{'text-light':hash=='all'},{'bg-dark':hash=='all'}]" >全部</a>
                    <a href="#/finish" :class="[{'card-link':isActive},{'px-3':isActive}, {'py-1':isActive} ,{'rounded':isActive} ,{'text-light':hash=='finish'},{'bg-dark':hash=='finish'}]">已完成</a>
                    <a href="#/unfinish" :class="[{'card-link':isActive},{'px-3':isActive}, {'py-1':isActive} ,{'rounded':isActive} ,{'text-light':hash=='unfinish'},{'bg-dark':hash=='unfinish'}]">未完成</a>
            </div>
          </div>
      </div>
      </div>
  </div>
</template>

<script>


export default {
  name: 'app',
  data() {
    return {
      carList:[{"title":"约会","isSelected":false},{"title":"打球","isSelected":true},{"title":"吃饭","isSelected":true}],
      // filterList:[],
      activeClass:"active",
      addthing:'',
      cur:'',
      hash:'',
      isActive:true
    }
  },
  directives:{
      focus(el,bindings){
       // console.log(bindings.value);
        if(bindings.value){
          el.focus();
        }
      }
  },
  created() {
    if(localStorage.getItem('todo')){
      this.carList=JSON.parse(localStorage.getItem('todo'));
    }
    this.hash=location.hash.split('/')[1]||'all';
    window.addEventListener("hashchange",()=>{
        // console.log(location.hash.split('/')[1]);
        
        this.hash=location.hash.split('/')[1];
    })
  },
  methods: {
    del(item){
      console.log(item);
      
       this.carList=this.carList.filter((i)=>{
          return  i!=item;
        })  
    },
    add(){
      let newArr={"title":this.addthing,"isSelected":false};
      this.carList.unshift(newArr);
      this.addthing='';
    },

   
  },
  computed: {
    filterList(){
         localStorage.setItem('todo',JSON.stringify(this.carList));
        if(this.hash=='all')  return this.carList;
        if(this.hash=='finish')  return this.carList.filter((item)=>item.isSelected);
        if(this.hash=='unfinish')  return this.carList.filter((item)=>!item.isSelected);
    },
    sum:{
      get(){
         return  this.carList.filter((item)=> !item.isSelected).length;
      }
    }
  },
   
}
</script>

<style>
.cardfa{
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color: #c0c0c0;
  text-decoration-line: line-through;
}
</style>