一、功能
1、界面上有一个输入框和一个提交按钮
2、在输入框中输入内容，点击提交后，将输入的任务展示在下面
3、点击任务，可以删除任务
二、实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist(添加和删除）</title>
<!--引入vue-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="todolist">
<input v-model="content">
<button @click="submit">提交</button>
<ul>
<todoitem v-for="(item,index) of list"
:key='index'
:item='item'
:index='index'
@delete="deleteOne"></todoitem>
</ul>
</div>
<script>
Vue.component('todoitem',{
props:['item','index'],
template:'<li @click="handleclick">{{item}}</li>',
methods:{
handleclick:function () {
this.$emit('delete',this.index)
}
}
})
new Vue({
el:'#todolist',
data:{
content:'',
list:[]
},
methods:{
submit:function () {
this.list.push(this.content)
this.content=''
},
deleteOne:function (index) {
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
三、运行结果
添加几个任务后，效果为：
点击读书任务，结果为：
