vue实现任务列表的添加，选择，删除

最新推荐文章于 2024-04-29 18:09:02 发布

相逢一笑与君行

最新推荐文章于 2024-04-29 18:09:02 发布

阅读量1k

点赞数

分类专栏： vue web前端 javaScrip 文章标签： vue js html css

本文链接：https://blog.csdn.net/qq_41505416/article/details/107985315

版权

web前端同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

javaScrip

6 篇文章 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>
</head>
<style>
   #app{
     width: 80%;
     margin: auto;
     background: #666;
   }
   .container{
     width: 80%;
     margin: auto;
     padding: 2px;
   }
   .header_input{
     width: 300px;
     height: 36px;
     line-height: 36px;
     font-size: 16px;
     font-weight: 600;
   }
   .submit_btn{
     width: 60px;
     height: 42px;
     line-height: 42px;
     border: 2px solid #fff;
   }
   .header_box{
     width: 100%;
     height: 36px;
     line-height: 36px;
     
   }
   .header_box>h2{
    float: left;
    margin: 0;
   }
   .header_box>span{
    line-height: 22px;
    font-size: 16px;
    width: 22px;
    height: 22px;
    border: 1px solid #f30;
    color: #fff;
    background-color: #f30;
    border-radius: 50%;
    text-align: center;
    float:right;
    margin:10px 0;
   }
   li{
     list-style: none;
   }
   .task_item{
     float: left;
   }
   .del_task{
    float: right;
   }
</style>
<body>
  <div id="app">
    <div class="container">
      <input class="header_input" type="text" @change="addTask" :value="taskValue">
      <button class="submit_btn" @click="submitTask">确认</button>
    </div>
    <div class="container">
      <div class="header_box">
          <h2>已添加的任务</h2>
          <span>{{taskList.length?taskList.length:0}}</span>
      </div>
      <ul class="box">
        <li
         v-for="(taskItem, index) in taskList"
         :key="index"
        >
         <input type="checkbox"class="task_item" @input="alreadyAddTask(index, 'add')">
        {{taskItem}}
        <button class="del_task" @click="deleteTask(index, 'add')">删除</button>
      </li>
      </ul>
    </div>
    <div class="container">
        <div class="header_box">
            <h2>已完成的任务</h2>
            <span>{{completeTask.lenght?completeTask.lenght:0}}</span>
        </div>
      <ul class="box">
          <li
          v-for="(completeTaskItem, index1) in completeTask"
          :key="index1">
          <input type="checkbox" class="task_item" @input="alreadyAddTask(index1,'complete')">
          {{completeTaskItem}}
          <button class="del_task"  @click="deleteTask(index1,'complete')">删除</button></li>
      </ul>
    </div>
  </div>


  <script src="./vue.js"></script>
  <script>
      const vm = new Vue({
        el:"#app",
        data:{
          taskValue:'',
          taskList:[],
          completeTask:[],
          num:0
        },
        methods:{
          addTask(e){
            if(e.target.value){
              this.taskList.push(e.target.value)
            }else{
              return ;
            }
          },
          submitTask(){
            this.taskValue=""
          },
          alreadyAddTask(index, tamp){
            if(tamp==="add"){
              let tempAddTask = this.taskList.splice(index,1)
              this.completeTask.push(...tempAddTask)
            }
            if(tamp==="complete"){
              console.log(tamp)
            let tempCompleteTask = this.completeTask.splice(index,1)
            this.taskList.push(...tempCompleteTask)
           }
          },
          deleteTask(index, val){
            if(val==="add"){
              this.taskList.splice(index,1)
            }
            if(val === "complete"){
              this.completeTask.splice(index, 1)
            }
          }
        }
      })
  
  </script>
</body>
</html>

效果如图所示
未添加任务
在这里插入图片描述
添加任务后

选择已经完成的任务