vue实现工作计划demo

最新推荐文章于 2024-04-21 09:32:42 发布

啥时候能干全栈

最新推荐文章于 2024-04-21 09:32:42 发布

阅读量566

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42177478/article/details/105171276

版权

vue 专栏收录该内容

27 篇文章 6 订阅

订阅专栏

文本框中输入计划点击添加，增加内容到正在进行，正在进行中check后移动至已完成，已完成的工作可以返回正在进行。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="index.css">

</head>
<body>
    <div class="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 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;
                },
                addMask(){
                    if(this.curMask === ""){return};
                    this.needDoList.push({
                        title:this.curMask,
                        id:Math.random(),                    });
                    this.curMask = "";               
                     },
                doCheck(index,type){
                    if (type === 'need') {
                        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){
                    // this.needDoList.splice(index,1);
                    const toDoList = type === 'need' ? this.needDoList : this.completeList;
                    toDoList.splice(index,1)

                }
            }
        })
    </script>
</body>
</html>

* {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
  }
  
  h2 .mask-num {
    height: 20px;
    padding: 0 5px;
    border-radius: 20px;
    background-color: #e6e6fa;
    color: #666;
    font-size: 14px;
  }
  
  body {
    background-color: #cdcdcd;
  }
  
  .container {
    width: 600px;
    margin: 0 auto;
    padding: 0 10px;
  }
  
  .header {
    height: 50px;
    background-color: #333;
  }
  
  .header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header .container .logo {
    width: 100px;
    line-height: 50px;
    color: #ddd;
    font-size: 24px;
    cursor: pointer;
  }
  
  .header .container .input-area {
    width: 60%;
  }
  
  .header .container .input-area input {
    width: 80%;
    height: 24px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    border: none;
    outline: none;
  }
  
  .header .container .input-area button {
    width: 15%;
    height: 24px;
    vertical-align: center;
  }
  
  .mask-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;
    padding: 0 15px;
    border-radius: 3px;
    border-left: 5px solid #629A9C;
    background-color: #fff;
  }
  
  .mask-list.complete-list li {
    border-left-color: #999;
    opacity: .5;
  }

啥时候能干全栈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实现工作计划demo

文本框中输入计划点击添加，增加内容到正在进行，正在进行中check后移动至已完成，已完成的工作可以返回正在进行。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
复制链接

扫一扫