Vue入门-使用Vue2完成简单的记事本Demo
需求：
①能够实现记录重复数据
②全部清空
③单条记录清空
页面效果：
代码：
<!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>