- _nosay
Vue实现ToDoList Demo
2018-05-17 13:22:07
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="doValue" placeholder="请输入内容" type="text" />
<button @click="handleBtnClick">提交</button>
<ul>
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
var TodoItem = {
props: ['content','index'],
template: "<li @click='handleItemClick'>{{ content }}</li>",
methods: {
handleItemClick: function()
{
this.$emit("delete", this.index);
}
}
};
var app = new Vue({
el: '#app',
components: {
TodoItem: TodoItem
},
data: {
list: [],
doValue : ""
},
methods: {
handleBtnClick: function()
{
this.list.push(this.doValue);
this.doValue = "";
},
handleItemDelete: function(index)
{
this.list.splice(index ,1);
}
}
});
</script>
</body>
</html>