Vue入门练习：小王记事本_vue练习记事本-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43652327/article/details/123964863

这是一个基于Vue.js的简单记事本应用示例，包含HTML、CSS和JavaScript代码。用户可以输入任务并添加到列表中，也可删除和清空任务。样式使用CSS进行美化，提供了一个清晰的界面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目结构：

|--peoject：
   |--index.html
   |--css
      |--index.css

HTML：

<!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>小王记事本</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app">
        <div id="w">
            <h1>小王记事本</h1>
            <header>
                <input type="text" placeholder="请输入任务:" v-model="inputValue" @keyup.enter="add">
            </header>
            <section id="main" >
                <ul>
                    <li v-for="(item,index) in list">
                        <div>
                            <span>{{ index+1 }}.</span>
                            <label>{{ item }}</label>
                            <button id="delete" @click="remove(index)">X</button>
                        </div>
                    </li>
                </ul>
            </section>
    
            <section id="tail" >
                <span id="sum" v-show="list.length!=0">{{list.length}} items</span>
                <button id="clear" @click="clear" v-show="list.length!=0">Clear</button>
            </section>
            <footer>
    
            </footer>
        </div>
        
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: ["阿巴阿巴", "abaaba", "hahahaha"],
                inputValue:""
            },
            methods: {
                add:function(){
                    this.list.push(this.inputValue);
                },
                remove:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            }
        })
    </script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#app{
    width: 500px;
    margin: 30px auto auto auto;
    border: 1px  solid #ccc;
    border-radius: 10px;
    box-shadow:2px 2px 10px #ccc;
}
#w{
    width: 450px;
    margin: auto;
}
h1{
    margin: 50px auto 10px auto;
}
input,li{
    width: 100%;
    height: 70px;
    border-top: 1px  solid #ccc;
    border-left: 1px  solid #ccc;
    border-right: 1px  solid #ccc;
    border-bottom: 0px  solid #ccc;
    border-radius: 0px;
    font-size: 35px;
    padding: 15px;
}
ul{
    width: 100%;
    list-style: none;
}
li{
    line-height: 70px;
    color: #777;
}
li div{
    height: 40px;
}
li span{
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    float: left;
}
li label{
    float: left;
    height: 40px;
    line-height: 40px;
    align-items: center;
    margin: 0px;
}
li:hover #delete{
    display: block;
}
#delete{
    border: 0px;
    background-color:inherit;
    font-size: 30px;
    color: #ccc;
    float: right;
    display: none;
}
#sum{
    display: inline-block;
    padding-top: 10px;
    background-color:inherit;
    font-size: 20px;
    color: #ccc;
}
#clear{
    padding-top: 10px;
    border: 0px;
    background-color:inherit;
    font-size: 20px;
    color: #ccc;
    float: right;
}
#tail{
    border-top: 1px  solid #ccc;
    height: 50px;
}