首先参考官网，先给案例进行布局，这是官网的效果图我们可以先进行参考 下面就开始我们的表演啦
<div class="todolist1"> <div class="a">ToDoList</div> <input type="text" class="inputsub" v-model.trim="content" placeholder="添加ToDoList" @keydown.enter="submit" /> </div>这个是头部的布局 这是下面添加的部分
<div class="list"> <div class="list-list"> <h2>正在进行({{nolength}})</h2> <ul> <li class="li" v-for="(item,index) in list" :key="index" v-show="!item.done" > <input type="checkbox" class="checkbox" @click.prevent="change(item,true)"> <span v-show="updataIndex != index" @dblclick="sub(item,index)">{{item.tit}}</span> <input type="text" v-show="updataIndex == index" v-model="item.tit" @blur="updateSave" @keydown.enter="updateSave" @keydown.esc="back(item)" /> <van-icon name="close" class="del" @click="del(index)" /> </li> </ul> <h2>已完成({{yeslength}})</h2> <ul> <li class="li2" v-for="(item,index) in list" :key="index" v-show="item.done"> <input type="checkbox" checked class="checkbox" @click="change(item,false)"> <span v-show="updataIndex != index" @dblclick="sub(item,index)">{{item.tit}}</span> <input type="text" v-show="updataIndex == index" v-model="item.tit" @blur="updateSave" @keydown.enter="updateSave" @keydown.esc="back(item)" /> <van-icon name="close" class="del" @click="del(index)" /> </li> </ul> </div> </div>这是代码的抛出部分，方法
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; }