vue代办事项用html实现
时间: 2023-12-14 19:37:01 浏览: 31
以下是一个简单的使用 HTML 实现的 Vue 代办事项示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue Todo List</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Todo List</h1>
<ul>
<li v-for="(todo, index) in todos" :key="index">
<input type="checkbox" v-model="todo.done">
<span :class="{ 'done': todo.done }">{{ todo.text }}</span>
<button @click="removeTodo(index)">x</button>
</li>
</ul>
<form @submit.prevent="addTodo">
<input type="text" v-model="newTodoText" placeholder="Add a new todo">
<button>Add</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn Vue', done: false },
{ text: 'Build an app', done: false }
],
newTodoText: ''
},
methods: {
addTodo: function() {
if (this.newTodoText.trim() !== '') {
this.todos.push({
text: this.newTodoText,
done: false
});
this.newTodoText = '';
}
},
removeTodo: function(index) {
this.todos.splice(index, 1);
}
}
});
</script>
<style>
.done {
text-decoration: line-through;
}
</style>
</body>
</html>
```
这个示例包含一个使用 `v-for` 指令循环渲染待办事项列表,以及一个使用 `v-model` 指令双向绑定输入框和复选框的值。还包括一个添加新待办事项和删除待办事项的方法。最后,通过 `:class` 绑定一个 CSS 类,以便在待办事项完成时动态应用 CSS 样式。