创建记事本

最新推荐文章于 2025-06-10 23:00:08 发布

紫夜✘

最新推荐文章于 2025-06-10 23:00:08 发布

阅读量129

点赞数

分类专栏： javascript小项目文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Purple_night_/article/details/129018026

版权

javascript小项目专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <input type="text" v-model="message">
       <input type="button" value="添加记事本" @click="save">
       <ul>
        <li v-for="(item,index) in lists">
            {{index+1}}、{{item}}<a href="javascript:;" @click="delRow(index)">删除当前记录</a>
        </li>
       </ul>
       <div v-show="show">
           <span>总数量：{{lists.length}}条</span>
           <input type="button" value="删除所有" @click="deleteAll">
       </div>
    </div>
   
    <script src="js\vue.js"></script>
  
    </script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                lists:["第一次记事","明天情人节"],
                message:"",
                show:true,

            },
            methods:{
                save(){
                    this.lists.push(this.message);
                    this.message="";
                    this.show=true;

                },
                deleteAll(){
                    this.lists=[];
                    this.show=false;
                },
                delRow(index){
                    this.lists.splice(index,1);
                    if(this.lists.length==0){
                        this.show=false;
                    }
                }
            }
        })
    </script>
</body>
</html>