vue中简单的添加删除功能实现

系统管理员 2021-07-24 14:28 584阅读 0赞

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> <link rel="stylesheet" href="./index.css"> </head> <body> <div id="app"> <div class="header"> <div class="container"> <div class="logo">toDoList</div> <div class="input-area"> <input type="text" @input="handleInput" :value="curMask"/> <button @click="addMask">添加</button> </div> </div> </div> <div class="container"> <h2> <span>正在进行</span> <span class="mask-num">{ {  needDoList.length }}</span> </h2> <ul class="mask-list"> <li v-for="(mask, index) in needDoList" :key="mask.id" > <div> <input type="checkbox" @change="doCheck(index, 'need')"/> <span>{ {  mask.title }}</span> </div> <button @click="deleteMask(index, 'need')">删除</button> </li> </ul> </div> <div class="container"> <h2> <span>已经完成</span> <span class="mask-num">{ {  completeList.length }}</span> </h2> <ul class="mask-list complete-list"> <li v-for="(mask, index) in completeList" :key="mask.id" > <div> <input type="checkbox" @change="doCheck(index, 'complete')"/> <span>{ {  mask.title }}</span> </div> <button @click="deleteMask(index, 'complete')">删除</button> </li> </ul> </div> </div> <script> const vm = new Vue({ 
          el: '#app', data: { 
            curMask: '',
            needDoList: [],   //接收   正在进行的数组
            completeList: []   //已经完成
          }, methods: { 
            handleInput (e) { 
              this.curMask = e.target.value;   //获取input的值
            }, addMask () { 
              //this.needDoList.push(this.curMask) if(this.curMask === '') {  return }; //如果输入的input值为空 直接返回 this.needDoList.push({     //点击按钮 将input的值添加到 正在进行noodDoList的数组当中
                title: this.curMask,    //添加的是字符串  字符串没有title和对象  需要转化为对象
                id: Math.random()
              });
              this.curMask = '';     //按钮添加之后  input为空
            }, doCheck (index, type) { 
    
              if(type === 'need') {      //点击checkbox ,正在进行变为已经完成  为了区分正在进行和已经完成,设置type
                const completeMask = this.needDoList.splice(index, 1);
                this.completeList.push(...completeMask);
              } else { 
                const noCompleteMask = this.completeList.splice(index, 1);
                this.needDoList.push(...noCompleteMask);
              }
            }, deleteMask (index, type) {     //已经完成和正在进行 都是点击删除按钮进行删除  为了区分 设置type
              const toDoList = type === 'need' ? this.needDoList : this.completeList;  //如果type=need 则删除是needDoList  否则删除的是completeList
              toDoList.splice(index, 1);
            }
          }
        })
    
    
    
       
        
      </script>
    </body>
    </html>