vue 版todolist
Posted mumian2
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 版todolist相关的知识，希望对你有一定的参考价值。
vue 版todolist
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/jscript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo"> Add a todo</label>
<input v-model="newTodoText" id='new-todo' placeholder="E.g. Feed the cat" />
<button>Add</button>
</form>
<ul>
<li is="todo-item" v-for="(todo,index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index,1)"></li>
</ul>
</div>
<script type="text/jscript">
Vue.component('todo-item', {
template: ' <li> {{title}} <button v-on:click="$emit('remove')">remove</button> </li> ',
props: ['title']
})
new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [{
id: 1,
title: 'Do the dishes'
},
{
id: 2,
title: 'Do the Vue'
}
],
newTodoId: 3
},
methods: {
addNewTodo: function() {
this.todos.push({
id: this.newTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
</script>
</body>
</html>
以上是关于vue 版todolist的主要内容，如果未能解决你的问题，请参考以下文章
Vue项目实战——实现一个任务清单基于 Vue3.x 全家桶（简易版）