效果:
源码:
<template>
<div>
<button v-on:click="decrement">-</button>
<input type="text" size="1" v-model="num">
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
//props:["num"],//从helloworld组件里面传一个初始值10。父组件到子组件
data(){
return{
num:0
}
},
methods:{
increment(){
this.num++
},
decrement(){
if (this.num<=0){
alert('受不了啦,宝贝不能再减少啦')
this.num=0;
}else {
this.num--;
}
}
}
}
</script>
<style>
input{
text-align: center;
}
</style>