TodoList 页面布局
时间: 2023-07-01 19:16:39 浏览: 64
TodoList 页面布局通常包含一个输入框,用于输入待办事项,一个添加按钮,用于添加待办事项,以及一个待办事项列表,用于展示已添加的待办事项。以下是一个简单的 TodoList 页面布局:
```html
<div id="app">
<h1>Todo List</h1>
<div>
<input type="text" v-model="todoText" placeholder="Enter a new todo...">
<button @click="addTodo">Add</button>
</div>
<ul>
<li v-for="(todo, index) in todoList" :key="index">{{ todo }}</li>
</ul>
</div>
```
其中,`v-model` 指令用于实现数据的双向绑定,将输入框中的数据绑定到 Vue 实例的 `todoText` 属性上。`@click` 用于绑定添加按钮的点击事件,当点击按钮时,将 `todoText` 添加到 `todoList` 数组中。`v-for` 指令用于遍历 `todoList` 数组,并将每个元素渲染为一个列表项。
在 Vue 实例中,我们需要定义 `todoText` 和 `todoList` 这两个数据属性,并定义一个 `addTodo` 方法,用于添加待办事项到 `todoList` 数组中。例如:
```js
new Vue({
el: '#app',
data: {
todoText: '',
todoList: []
},
methods: {
addTodo: function () {
if (this.todoText.trim() !== '') {
this.todoList.push(this.todoText);
this.todoText = '';
}
}
}
})
```
这样,我们就实现了一个简单的 TodoList 页面布局。当用户在输入框中输入待办事项并点击添加按钮后,待办事项就会被添加到列表中。