Vue入门-使用Vue2完成简单的记事本Demo

道爷我悟了

于 2024-10-07 19:39:54 发布

阅读量125

点赞数 4

分类专栏： Vue HTML笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_68929783/article/details/142745044

版权

HTML笔记同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue

9 篇文章 0 订阅

订阅专栏

需求：

①能够实现记录重复数据

②全部清空

③单条记录清空

页面效果：

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue2 记事本</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .note-container {
            max-width: 600px;
            margin: 0 auto;
        }

        textarea {
            resize: vertical;
        }
    </style>
</head>

<body>
    <div id="app" class="note-container">
        <textarea v-model="noteContent" class="form-control"></textarea>
        <div class="mt-3">
            <button @click="saveNote" class="btn btn-primary me-2">保存</button>
            <button @click="clearNote" class="btn btn-secondary">清空</button>
        </div>
        <ul class="list-group mt-3" v-if="savedNotes.length > 0">
            <li class="list-group-item" v-for="note in savedNotes" :key="note">
                {{ note }}
                <button @click="deleteNote(note)" class="btn btn-danger btn-sm float-right">删除</button>
            </li>
        </ul>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                noteContent: '',
                savedNotes: []
            },
            methods: {
                saveNote() {
                    const note = this.noteContent.trim();
                    if (note !== '') {
                        this.savedNotes.push(note);
                        localStorage.setItem('notes', JSON.stringify(this.savedNotes));
                        this.noteContent = '';
                        alert('笔记已保存！');
                    }
                },
                clearNote() {
                    this.noteContent = '';
                    this.savedNotes = [];
                    localStorage.removeItem('notes');
                },
                deleteNote(noteToDelete) {
                    this.savedNotes = this.savedNotes.filter(note => note !== noteToDelete);
                    localStorage.setItem('notes', JSON.stringify(this.savedNotes));
                }
            },
            mounted() {
                const savedNotes = localStorage.getItem('notes');
                if (savedNotes) {
                    this.savedNotes = JSON.parse(savedNotes);
                }
            }
        });
    </script>
</body>

</html>