VUE简易计划清单

本文介绍: vue 简单的计划清单程序，实现了添加计划功能，删除计划功能，查看详情，完成计划等功能。

效果 预览图

完整代码

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 600px;
            height: 800px;
            background: #ccc;
            margin: 50px auto;
            padding: 20px;
        }
        #app>input{
            width: 450px;
            height: 50px;
            border: none;
            margin: 30px;
        }
        #app>button{
            width: 80px;
            height: 50px;
            border: none;
            background: #9ddeec;
        }
        h3{
            margin-left: 30px;
        }
        ul{
            list-style-type: none;
            height: 300px;
            overflow: auto;
            margin-top: 10px;
        }
        .t{
            width: 530px;
            margin: 0 auto;
            height: 40px;
            margin-top: 10px;
            background: #fff;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
        }
        li{
            position: relative;
        }
        span{
            display: inline-block;
            width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #app>ul>li>button{
            height: 30px;
            width: 60px;
            border: none;
            cursor: pointer;
        }
        var{
            font-size: 12px;
            color: #ccc;
        }
        #app .ck{
            width: 530px;
            height: 100px;
            margin: 0 auto;
            display: none;
            background: #fff;
            z-index: 100;
            position: relative;
            overflow: auto;
            
        }
        .kk{
             white-space: wrap;
        }
        .ck button{
            width: 30px;
            height: 30px;
            border: none;
            position: absolute;
            right: 3px;
            bottom: 3px;
            cursor: pointer;
        }
        li .m{
            border: none;
            background: #8cbde5;
            width: 60px;
            height: 30px;
            border-radius: 5px;
            color: #fff;
        }
        .hc{
           position: absolute;
           width: 100%;
           height: 100%;
           background: rgba(0,0,0,0.3);
           border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="val">
        <button @click="add">添加</button>
        <h3>待完成事项</h3>
        <ul>
            <li v-for="(item,index) in arr">
                <div class="t">
                     <input type="checkbox" v-model="item.bol" @change="xz(index)">
                 <span>{{arr[index].name}}</span> 
                 <var>{{arr[index].time}}</var>
                <button class="m" @click="sc(index)">删除</button>
                <button class="m" @click="ck(index)">查看详情</button> 
                </div>
                  <div :style="{display:n == index ?'block':'none'}" class="ck">
                    <p class="kk">{{arr[index].name}}</p> 
                    <button @click="sq">收起</button>
                  </div>
            </li>
           
            
        </ul>
        <h3>已完成事项</h3>
        <ul>
            <li v-for="(item,index) in arr2">
                <div class="t">
                     <input type="checkbox" v-model="item.bol" @change="xz(index)">
                 <span>{{arr2[index].name}}</span> 
                 <var>{{arr2[index].time}}</var>
                 <div class="hc" @click="bb"></div>
            </li>
        </ul>
    </div>
</body>
</html>
<script type="module">
 import {createApp} from './js/vue.esm-browser.js'
 createApp({
    data() {
        return {
            arr:[
                {name:'早上:早起背面试题',time:'2023/11/22 18:36:00',bol:false},
                {name:'上午:学习',time:'2023/11/22 18:06:00',bol:false},
                {name:'中午:午休',time:'2023/11/22 17:35:00',bol:false},
                {name:'晚上:复习',time:'2023/11/22 14:36:00',bol:false},
            ],
            arr2:[],
            val:'',
            n:-1,
            num:0,
            fl:1,
          }
    },
    methods: {
        sc(index){
           
            let userResponse = window.confirm("确定要删除该计划吗？");
            if (userResponse) {
                this.arr.splice(index,1)
            } else {
              
            }
        },
        xz(index){
            let userResponse = window.confirm("确定已经完成了该计划吗");
            if (userResponse) {
            this.arr2.push(this.arr[index])
            this.arr.splice(index,1)
            console.log(this.arr2);
            } else {
              this.arr[index].bol = false
            }
        },
        add(){
           let nn = new Date().toLocaleString()
            console.log(this.val);
            if (this.val!='') {
                 let obj={
                name:this.val,
                time:nn
            }
            this.arr.unshift(obj)
            this.val=''
            }else if (this.val=='') {
                alert('内容不能为空')
            }
        },
        ck(index){
           this.n = index;
        },
        sq(){
            this.n = -1
        },
        bb(){
            alert('已经确定完成的计划不能查看点击！')
        }
    },

 }).mount('#app')    
</script>