本文共 2837 字，大约阅读时间需要 9 分钟。

首先参考官网，先给案例进行布局，这是官网的效果图我们可以先进行参考

   
      
    
     ToDoList
    
      
        
   

这个是头部的布局

   
      
    
        
     
正在进行({
  {nolength}})
        
     
          
      
                        {
  {item.tit}}                        
                 
        
     
        
     
已完成({
  {yeslength}})
        
     
          
      
                        {
  {item.tit}}                        
                 
        
     
      
    
    
   

这是代码的抛出部分，方法

export default {  data() {    return {      content: "",      list: [],      updataIndex:-1, //要求修改元素的下标      tempValue:'' //临时记录要修改元素的值。修改前备份用    };  },  created(){    let list= localStorage.list;    if(list){      this.list=JSON.parse(list)    }  },  computed:{    nolength(){      let count=0      this.list.map(item=>{        if(!item.done){          count++        }      })      return count    },    yeslength(){      let count=0      this.list.map(item=>{        if(item.done){          count++        }      })      return count    }  },  methods: {    submit() {      // 非空校验      if(this.content.trim()==""){        return      }      this.list.push({        tit:this.content,        done:false      });      this.content=""            this.save()    },    del(index){      this.list.splice(index,1)      this.save()    },    sub(item,index){      this.updataIndex=index      this.tempValue=item.tit    },                                                     updateSave(){      this.updataIndex=-1      this.save()    },    back(item){      item.tit=this.tempValue      this.updataIndex=-1    },    change(item,state){      // if(checked){      //   item.done=true      // }else{      //   item.done=false      // }      item.done=state      this.save()    },    save(){    localStorage.list=JSON.stringify(this.list)  }  }};

这是下面的样式部分

.todolist1 {  width: 100%;  height: 50px;  background-color: #323232;  display: flex;  color: #dddddd;  font-size: 20px;  line-height: 50px;}.a {  margin-left: 50px;}.inputsub {  width: 45%;  height: 30px;  background-color: #fefefe;  border-radius: 5px;  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),    0 1px 6px rgba(0, 0, 0, 0.45) inset;  margin-left: 100px;  margin-top: 10px;  border: 0px;  color: #323232;}.del{  line-height: 40px;  font-size: 20px;  margin-left: 100px;}.li {  width: 93%;  height: 40px;  background-color: #ffffff;  border-left: 5px solid #629a9c;  margin-top: 10px;  border-radius: 5px;  list-style: none;  font-size: 18px;  line-height: 40px;}.checkbox{  width: 20px;  height: 20px;  margin-left: 10px;}.li2{  width: 93%;  height: 40px;  background-color: #E6E6E6;  border-left: 5px solid #629a9c;  margin-top: 10px;  border-radius: 5px;  list-style: none;  font-size: 18px;  line-height: 40px;}.list {  width: 100%;  height: 700px;  background-color: #cdcdcd;}.list-list{  margin-left: 30px;}

转载地址：http://vzylf.baihongyu.com/