正在回答 回答被采纳积分+1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src=./vue.js></script>
</head>
<body>
<div id='app'>
<input type="text" v-model='inputValue' placeholder="请填写内容">
<button v-on:click='btnClick'>提交</button>
<button v-on:click='clear'>清除</button>
<ul>
<to-list v-bind:content='item'
:index='index'
v-for='(item,index) in list'
@Dele='handleItemDelete'>
</to-list>
<!-- <li v-for='item in list'>{{item}}</li> -->
</ul>
</div>
<script>
// Vue.component('ToList',{
// props:['content'],
// template:'<li >{{content}}</li>'
// });
var ToList={
props:['content','index'],
template:"<li @click='itemClick'>{{content}}</li>",
methods: {
itemClick:function(){
// alert('dddd');
this.$emit("Dele",this.index);
}
},
}
var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
components:{
ToList:ToList
},
methods: {
btnClick:function(){
// alert('dddd');
if(this.inputValue !==''){
this.list.push(this.inputValue);
this.inputValue='';
}else{
this.inputValue='请填写内容';
}
},
clear:function(){
this.list=[]
},
handleItemDelete:function(index){
// alert( typeof(this.list[index]));
this.list.splice(index,1,Number(this.list[index])+1);
// this.list[index] +=1;
}
}
});
</script>
</body>
</html>
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星