commit 7b034c115bdfd93b11238281d228f5c95d40e50f Author: liuYukun260 <2528075388@qq.com> Date: Sun Mar 9 19:07:20 2025 +0800 Initial commit diff --git a/demo.css b/demo.css new file mode 100644 index 0000000..3e45e17 --- /dev/null +++ b/demo.css @@ -0,0 +1,78 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + background-color: #f9f9f9; + } + + #app { + max-width: 600px; + margin: 0 auto; + background: #fff; + padding: 20px; + box-shadow: 0px 2px 5px rgba(0,0,0,0.1); + border-radius: 8px; + } + + h1 { + text-align: center; + margin-bottom: 20px; + } + + .input-container { + display: flex; + gap: 10px; + } + + input[type="text"] { + flex-grow: 1; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + } + + button { + background-color: black; + color: white; + border: none; + padding: 10px 15px; + border-radius: 4px; + cursor: pointer; + } + + button.delete { + background-color: red; + } + + button:hover { + opacity: 0.8; + } + + .tasks { + list-style-type: none; + padding: 0; + } + + .tasks li { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid #ddd; + } + + .task-actions, + .edit-actions { + display: flex; + gap: 10px; + } + + .completed { + text-decoration: line-through; + color: gray; + } + + .completed { + text-decoration: line-through; + color: gray; + } \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..23bf501 --- /dev/null +++ b/demo.html @@ -0,0 +1,50 @@ + + + + + + + To-do List + + + +
+

To-do List

+ + +

What needs to be done?

+ + + + +

{{ completedCount }} out of {{ tasks.length }} items completed

+ + + +
+ + + + diff --git a/demo.js b/demo.js new file mode 100644 index 0000000..d683258 --- /dev/null +++ b/demo.js @@ -0,0 +1,47 @@ +const { createApp } = Vue; +createApp({ + data() { + return { + newTask: '', + tasks:[ + { name: 'Learn Vue', completed: false }, + { name: 'Create a Vue project with the CLI', completed: true }, + ], + editingIndex: null, + editingTask: '', + } + }, + computed: { + completedCount() { + return this.tasks.filter(task => task.completed === true).length; + } + }, + methods: { + addTask(){ + if (this.newTask.trim() !== '') { + this.tasks.push({ name: this.newTask, completed: false }); + this.newTask = ''; + } + }, + editTask(index) { + this.editingIndex = index; + this.editingTask = this.tasks[index].name; + }, + cancelEdit() { + this.editingIndex = null; + this.editingTask = ''; + }, + saveEdit(index) { + if(this.editingTask.trim() !== ''){ + this.tasks[index].name = this.editingTask; + this.cancelEdit(); + } + }, + deleteTask(index) { + this.tasks.splice(index, 1); + }, + completeTask(index) { + this.tasks[index].completed = true; + } + } +}).mount('#app'); diff --git a/屏幕截图 2025-03-09 150120.png b/屏幕截图 2025-03-09 150120.png new file mode 100644 index 0000000..a9457b0 Binary files /dev/null and b/屏幕截图 2025-03-09 150120.png differ