简单的todo-list
2018-08-01 本文已影响2人
椰果粒
利用v-model双向数据绑定
父组件向子组件传值用 props
子组件向父组件传值用 $emit()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
请输入待办事项：<input type="text" v-model="inputValue">
<button @click="submitData">提交</button>
<ul>
<todo-item
v-for="(item,index) in lists"
:content="item"
:index="index"
@delete="handleDelete"
>{{item}}</todo-item>
</ul>
</div>
<script>
new Vue({
el : "#app",
// 子组件（局部组件）
components : {
TodoItem : {
props : ['content','index'],
template : "<li @click='deleteItem'>{{content}}</li>",
methods : {
deleteItem : function(){
this.$emit('delete',this.index);
}
}
}
},
data : {
inputValue : "",
lists : []
},
methods : {
submitData : function(){
this.lists.unshift(this.inputValue);
this.inputValue = '';
},
handleDelete : function(index){
this.lists.splice(index,1);
}
}
})
</script>
</body>
</html>
