用Vue写简单的页面备忘录便签增加和删除_vue中的textarea中书写整体标签,整体删除-CSDN博客

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

这个示例展示了如何用Vue.js创建一个简单的应用，用户可以在文本框输入内容，点击保存后，文本及当前时间会被添加到下方的表格中。每个记录行都有一个删除按钮，用于移除对应的记录。应用利用Vue的数据绑定和方法来实现动态交互。

摘要由CSDN通过智能技术生成

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

在这里插入图片描述

<!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>