Vue入门练习：小王记事本

最新推荐文章于 2023-01-08 15:13:02 发布

王跃坤

最新推荐文章于 2023-01-08 15:13:02 发布

阅读量760

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_43652327/article/details/123964863

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

项目结构：

|--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;
}

参考教程：

https://download.csdn.net/download/qq_43652327/85078515
https://www.bilibili.com/video/BV12J411m7MG?p=23

王跃坤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue入门练习：小王记事本

目录项目结构：HTML：CSS参考教程：这个东西放在编译器就能直接用，非常简单的Vue入门Demo项目结构：|--peoject： |--index.html |--css |--index.cssHTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c
复制链接

扫一扫