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

<!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>
vue中 简单的添加删除功能实现

猜你喜欢

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