效果图:
HTML:
<div class="box">
<ul id="car">
<li>宝贝数量:</li>
<li><button v-on:click="subtract()">-</button></li>
<li><input type="text" value="0" size="1" v-model="count"></li>
<li><button v-on:click="add()">+</button></li>
</ul>
</div>
CSS:
<style>
ul,li{
list-style: none;
}
li{
float: left;
}
input{
text-align: center;
}
</style>
VUE:
<script>
new Vue({
el:'#car',
data:{
count:0
},
methods:{
add:function(count){
this.count++;
},
subtract:function(count){
if (this.count<=0){
alert('受不了啦,宝贝不能再减少啦')
this.count=0;
}else {
this.count-=1;
}
},
}
})
</script>