一、功能
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>
三、運行結果
添加幾個任務後,效果爲:
點擊讀書任務,結果爲: