vue组件实现删除功能
- 目标
当我在input框中输入数据后，点击提交按钮，保存
点击我添加的内容进行删除
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
<ui>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"></todo-item>
</ui>
</div>
<script type="text/javascript">
var TodoItem={
props:['content','index'],
template:'<li @click="handleClick">{
{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
}
new Vue({
el:"#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[],
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
},
handleDelete:function(index){
this.list.splice(this.index,1);
}
}
})
</script>
</body>
</html>