使用v-on绑定事件监听器,编写一个加分减分的程序
<div id="app" >
本场比赛得分:{{fenshu}}
<p>
<button v-on:click="jiafen">加分</button>
<!-- @是v-on缩写-->
<button @click="jianfen">减分</button><br/>
<!-- 绑定键盘事件,这里是回车enter,还可以根据键盘码绑定,例如回车是13。v-on:keyup.13-->
<input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
fenshu:0,
fenshu2:1
},
//methods是写方法的属性
methods:{
jiafen:function(){
this.fenshu++;
},
jianfen:function(){
this.fenshu--;
},
onEnter:function(){
//parseInt()把字符串转化成数字类型相加
this.fenshu=this.fenshu + parseInt(this.fenshu2);
}
}
})
</script>