HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加</title>
</head>
<style>
[v-cloak]{
display: none;
}
ul li{
margin-bottom: 50px;
}
</style>
<body>
<div id="app" v-cloak>
<ul>
<li v-for='item,index in items'>
<button @click="add(index)">{{items[index].id}}.添加</button>
<p v-cloak>{{items[index].count}}</p>
<input type="text" v-model='items[index].num'>
<button @click='del(index)'>刪除</button>
<button @click='join(index)'>加入</button>
<button @click='remove(index)'>移除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vue=new Vue({
el:'#app',
data:{
items:[
{id:0,count:0,num:''},
{id:1,count:0,num:''},
{id:2,count:0,num:''}
]
},
methods:{
add(index){
if(this.items[index].num!=''){
this.items[index].count=parseFloat(this.items[index].num);
this.items[index].num=''
}else{
this.items[index].count++
}
},
del(index){
if(this.items[index].count<=0){
alert('太小了')
}else{
this.items[index].count--
}
},
remove(index){
this.items.splice(index,1)
},
join(index){
this.items.splice(index+1,0,{id:this.items.length,count:0,num:''})
}
}
})
</script>
</body>
</html>
ScreenShot_20210617204741.png
2021-06-17
