vue crud 代码
以下是一个基本的Vue CRUD代码示例：
<!DOCTYPE html>
<html>
<head>
<title>Vue CRUD Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>Todo List</h2>
<form @submit.prevent="addTodo">
<input v-model="newTodo" placeholder="Add a new todo">
<button type="submit">Add</button>
</form>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="deleteTodo(index)">Delete</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [],
newTodo: ''
},
methods: {
addTodo() {
this.todos.push(this.newTodo);
this.newTodo = '';
},
deleteTodo(index) {
this.todos.splice(index, 1);
}
}
});
</script>
</body>
</html>
这是一个简单的待办事项列表示例，其中包含添加和删除待办事项的功能。用户可以在输入框中输入新的待办事项，并点击"Add"按钮将其添加到列表中。每个待办事项都有一个"Delete"按钮，可以将其从列表中删除。
原文地址: https://www.cveoy.top/t/topic/jes4 著作权归作者所有。请勿转载和采集!