老师帮忙检查一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件间传值</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 在此补充代码 -->
<input type="text" v-model='inputValue'>
<button @click='addItem'>添加</button>
<todo-list :content='item'
:index='index'
v-for="(item,index) in list"
@delete="handDelete">
</todo-list>
</div>
<script>
// 在此补充代码
var TodoList={
props:['content','index'],
template:'<li @click="handItem">{{content}}</li>',
methods:{
handItem:function(){
this.$emit('delete',this.index)
}
}
}
var app = new Vue({
el: "#app",
// 在此补充代码
components:{
TodoList:TodoList
},
data:{
list:[],
inputValue:''
},
methods:{
addItem:function(){
this.inputValue!==''?this.list.push(this.inputValue):'';
this.inputValue='';
},
handDelete:function(index){
this.list.splice(index,1,+(this.list[index])+1)
}
}
})
</script>
</body>
</html>
正在回答
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星