学习笔记(05):Vue2.x从入门到实战-v-on：绑定事件监听器

立即学习:https://edu.csdn.net/course/play/6823/135317?utm_source=blogtoedu

五、v-on：绑定事件监听器

一个简单的计分器的程序来展现

<div id="app">
    比赛计分：{{score}}
    <p>
        <button v-on:click="add">加分</button>
        <button @click="cut">减分</button><br/>
        <input type="text" v-on:keyup.enter="count" v-model="sendcount">
    </p>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            score:0,
            sendcount:0
        },
        methods:{
            add:function(){
                this.score++;
            },
            cut:function () {
                this.score--;
            },
            count:function () {
                this.score=this.score+parseInt(this.sendcount);
            }
        }
    })
</script>

v-on:click还可以有更简便的写法

<button @click="cut">减分</button><br/>

v-on除了绑定click事件，还可以绑定其他事件，比如绑定键盘回车事件v-on:keyup.enter。

<input type="text" v-on:keyup.enter="count" v-model="sendcount">

js代码

count:function () {
                this.score=this.score+parseInt(this.sendcount);
            }

文本框的数字是字符串型的，所以用parseInt()函数进行整数转换。

新手一枚，若有不足，请指正！