用Vue写简单的页面备忘录便签增加和删除

最新推荐文章于 2023-08-02 18:31:25 发布

Shususumu

最新推荐文章于 2023-08-02 18:31:25 发布

阅读量546

点赞数

分类专栏：初学文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_44449336/article/details/108940607

版权

初学专栏收录该内容

10 篇文章 0 订阅

订阅专栏

有文本框和保存按钮,点击保存后将文本和当前时间保存在下方表格中
表格每行有删除按钮可以删除该行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<style>
    .textarea {
        width: 400px;
        height: 120px;
        margin: 0 auto;
    }
    
    table {
        border-collapse: collapse;
        margin: 0 auto;
        border: 1px solid black;
    }
    
    .savetime {
        width: 160px;
    }
    
    .saveevent {
        width: 200px;
    }
    
    td {
        text-align: center;
    }
    
    tr {
        border-bottom: 1px solid black;
    }
</style>

<body>
    <div id="app">
        <div class="textarea">
            <textarea v-model='noteText' cols="40" rows="5" placeholder="请输入需要记录的内容"></textarea>
            <button @click='save'>保存</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th class="saveevent">事件</th>
                    <th class="savetime">保存时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='(item,index) in notes'>
                    <td>{{item.id}}</td>
                    <td>{{item.event}}</td>
                    <td>{{item.date}}</td>
                    <td><button @click='dlt(index)'>删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    var nowTime = new Date(); //获取当前时间
    var N = new Vue({
        el: '#app',
        data: {
            noteText: '',
            notes: [{
                id: 1,
                event: '明早去餐厅',
                date: '2020/10/6 下午3:58:53'
            }, {
                id: 2,
                event: '明天下午去超市',
                date: '2020/10/6 下午3:59:43'
            }, {
                id: 3,
                event: '明天晚上去跑步',
                date: '2020/10/6 下午4:00:13'
            }],
            nextId: 4
        },
        methods: {
            save() {
                this.notes.push({
                    //id自增
                    id: this.nextId++,
                    //记录文本框内容
                    event: this.noteText,
                    //记录当前时间
                    date: nowTime.toLocaleString()
                })

                //保存后清空文本域
                this.noteText = ''
            },
            dlt(index) {
                this.notes.splice(index, 1)
            }
        }
    })
</script>

</html>

Shususumu

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
用Vue写简单的页面备忘录便签增加和删除

有文本框和保存按钮,点击保存后将文本和当前时间保存在下方表格中表格每行有删除按钮可以删除该行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
复制链接

扫一扫