vue.js实现todolist
时间: 2023-09-29 16:03:51 浏览: 46
的原理是什么?
Vue.js实现todolist的原理是利用Vue.js的双向数据绑定特性,将用户输入的任务添加到一个数据对象里面,然后利用v-for指令将数据对象中的任务列表渲染到页面上。用户可以在页面上勾选已完成的任务,Vue.js 自动监听勾选状态的变化,并将已完成的任务从任务列表中移除,实现todolist的基本功能。
相关问题
vue.js实现todolist代码
很高兴回答您的问题!以下是一个简单的Vue.js实现todolist的代码:
```
<template>
<div>
<h1>Todolist</h1>
<input v-model="newItem" @keyup.enter="addItem" type="text" placeholder="Add new item...">
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }} <span @click="removeItem(index)">X</span></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newItem: '',
items: []
}
},
methods: {
addItem() {
if (this.newItem !== '') {
this.items.push(this.newItem);
this.newItem = '';
}
},
removeItem(index) {
this.items.splice(index, 1);
}
}
}
</script>
```
希望能对您有所帮助!如果您还有其他问题需要解答,请随时提出。
vue2.0实现todolist
好的,下面是一个简单的 Vue 2.0 实现 todolist 的例子:
首先,我们需要创建一个 Vue 实例,并在 data 属性中定义一个数组 todos:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Todo List Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Todo List</h1>
<input type="text" v-model="newTodo" placeholder="Add new todo">
<button @click="addTodo">Add</button>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [],
newTodo: ''
},
methods: {
addTodo: function() {
if (this.newTodo.trim()) {
this.todos.push(this.newTodo);
this.newTodo = '';
}
},
removeTodo: function(index) {
this.todos.splice(index, 1);
}
}
});
</script>
</body>
</html>
```
在上面的例子中,我们在模板中使用了 v-model 指令来实现输入框和数据的双向绑定,使用了 v-for 指令来循环渲染 todos 数组中的每个元素。同时,我们定义了两个方法 addTodo 和 removeTodo 来实现添加和删除 todo 的功能。
运行代码后,你应该可以看到一个简单的 Todo List 应用程序,你可以在输入框中添加新的 todo,也可以点击每个 todo 后面的 Remove 按钮来删除它。