v-on 事件监听器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-on事件监听器</title>
</head>
<body>
<h1>v-on 事件监听器</h1>
<hr>
<div id="app">
    本场比赛得分： {{fenshu}} <br/>
    <button v-on:click="jiafen">加分</button>
    <button @click="jianfen">减分</button><br/>
    <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">

</div>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            fenshu:1,
            fenshu2:1
        },
        methods:{
            jiafen:function(){
                this.fenshu++;
            },
            jianfen:function(){
                this.fenshu--;
            },
            onEnter:function(){
                this.fenshu=this.fenshu+parseInt(this.fenshu2);
            }
        }
    })
</script>
</body>
</html>

　我们的v-on 还有一种简单的写法，就是用@代替。

<button @click="jianfen">减分</button>

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。
 <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">
 js:
onEnter:function(){
                this.fenshu=this.fenshu+parseInt(this.fenshu2);
 }
posted @ 2017-07-31 16:50  宇宙无敌超级美少女  阅读(133)  评论(0)    收藏  举报