vue实现简单的网页记事本

最新推荐文章于 2024-01-06 08:59:49 发布

Record growth...

最新推荐文章于 2024-01-06 08:59:49 发布

阅读量285

点赞数

分类专栏： Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44239550/article/details/128365378

版权

Vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html>
<head>
    <title>笔记本案例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
<body>
    <div class="container mt-5 justify-content-center" style="width: 1120px;">
        <div id="app" class=" m-auto w-50" >
            <h4 class="text-center mb-5">笔记本</h4>
            <div class=" w-100">
                <!-- 输入部分 -->
                <div class="card card-title">
                    <input type="text" class="m-auto   form-control" placeholder="还没任务？还不快写代码" v-model="origin"  @keyup.enter="add">
                </div>
                <!-- 展示部分 -->
                <div>
                    <div class="d-flex" v-for="(list,index) in ListArry" >
                        <span class="card card-body mr-1"   @dblclick="dele(index)" >
                        {{index + 1 + "."}}
                        {{list}}
                        </span>
                    </div>
                    <footer class="card card-footer d-flex" v-if="ListArry.length > 0" >
                        <small>{{ListArry.length}} items to do.. <span class="float-right display-block "> <button @click="clear" class="btn p-0 m-0" ><small>Clear</small></button> </span></small> 
                       
                    </footer>
                </div>
            </div>
            
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var 自定义 = new Vue({
                el: '#app',
                data: {
                    origin:"写代码",
                    ListArry:[],
                    isActive:true,
                },
                methods:{
                    add:function () {
                        if (this.origin.trim() =="") {
                            alert("无效值")
                            return;
                        }
                        this.ListArry.push(this.origin);
                        this.origin = ""

                    },
                   dele(index){
                        var x = confirm("确认删除" + (index + 1) + "号任务？" )
                        if(x){
                            this.ListArry.splice(index,1);
                        }else{
                            return false;
                        }
                   },
                   clear(){
                        x = confirm("确认清空？")
                       if (x) {
                           this.ListArry = [];
                       } else {
                           return false;
                       }
                        
                   }
                }
            })
    </script>
</body>
</html>