VUE2.0学习之路5【内部指令】 v-on 监听事件

零妖大盗 V8

于 2019-12-26 15:29:40 发布

阅读量352

点赞数

本文为博主原创文章，未经博主允许不得转载。转载需注明原文地址。

本文链接：https://blog.csdn.net/tsoTeo/article/details/103621127

版权

VUE 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

<body>
    <h1>v-on 事件监听器</h1>
    <hr>
    <div id="app">
        本场比赛得分： {{count}}<br />
        <button v-on:click="jiafen">加分</button>
        <button v-on:click="jianfen">减分</button>

    </div>

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

v-on绑定事件，事件就是methods中定义的方法。

<button v-on:click="jianfen">减分</button>

v-on 还有一种简单的写法，就是用@代替，这两种效果是一样的

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

下面监听回车，给回车绑定一个方法，增加一个文本框：

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount" placeholder="输入一个数字，然后回车">

为回车绑定事件，这里的 v-on:keyup.enter 中的enter可以改为13，键盘上的每一个键都对应一个值

onEnter: function () {
    this.count = this.count + parseInt(this.secondCount);
}

每次回车，获取文本框中的文本转化为int类型，将值更新给count。因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。

这里看到使用了 v-model，它是绑定数据元的，使用v-model是为了取到DOM元素中的值。

零妖大盗 V8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE2.0学习之路5【内部指令】 v-on 监听事件

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。<body> <h1>v-on 事件监听器</h1> <hr> <div id="app"> 本场比赛得分： {{count}}<br /> <button v-on:...
复制链接

扫一扫