小黑记事本

最新推荐文章于 2024-06-01 16:31:18 发布

sqc.S

最新推荐文章于 2024-06-01 16:31:18 发布

阅读量132

点赞数

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

本文链接：https://blog.csdn.net/bjyxszs/article/details/120139754

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习地址：https://www.bilibili.com/video/BV12J411m7MG?p=18

效果展示：

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/note.css">
    
</head>
<body>
    <div class="box" id='app'>
        <div class="header">
            <h1>小黑记事本</h1>
            <input type="text" placeholder="请输入任务" v-model='msg'
             @keyup.enter='add'>
        </div>
        <div class="body">
            <ul>
                <li v-for='(item,index) in msgArr'>
                    <div class='message'>
                        <span>{{index+1}}</span>
                        <label for="">{{item}}</label>
                        <button @click='remove(index)'>X</button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer">
            <img src="img/logo.png" alt="">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src='js/node.js'></script>
     
</body>
</html>

css代码：

* {
    padding: 0;
    margin: 0;
}
.box {
    width: 300px;
    /* background-color: grey; */
    margin: 40px auto 0;
}
h1 {
    font-weight: normal;
    color: coral;
    font-size: 28px;
    text-align: center;
    
}
input {
    width: 300px;
    height: 30px;
    outline: none;
    padding-left: 2px;
    margin: 20px 0 0;
}
ul {
    background-image: url(../img/bg.png);
}
li {
    list-style: none;
    border-bottom: 1px solid grey;
}
.message {
    margin: 5px 0;
    width: 100%;
}
button {
    display: none;
    float: right;
    padding-right: 30px;
    width: 20px;
    height: 25px;
    border: none;
    background-color: transparent;
    font-size: 14px;
    outline: none;
}
li:hover button {
    display: block;
}
button:hover{
    color: rgb(243, 83, 43);
}
r
.footer {
    text-align: center;
    margin-top: 30px;
}
img {
    width: 50%;
}

js代码：

var app = new Vue({
    el:'#app',
    data:{
        msg:'',
        msgArr:[]
    },
    methods:{
        add:function(){
            // console.log(this.msg);
            this.msgArr.push(this.msg);
            // console.log(this.msgArr);
            this.msg=''
        },
        remove:function(index){
            // console.log(index);
            this.msgArr.splice(index,1)
        }
    }
})

sqc.S

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小黑记事本

学习地址：https://www.bilibili.com/video/BV12J411m7MG?p=18效果展示：html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor.
复制链接

扫一扫