参考官网
https://cn.vuejs.org/v2/guide/list.html
下面是一个
简单
的
todo
列表的完整例子
模板
<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>
组
件
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:
‘Take out the trash’
,
},
{
id:
3
,
title:
‘Mow the lawn’
}
],
nextTodoId:
4
},
methods: {
addNewTodo:
function
() {
this
.todos.push({
id:
this
.nextTodoId++,
title:
this
.newTodoText
})
this
.newTodoText =
”
}
}
})