v-on事件绑定

最新推荐文章于 2024-01-23 11:29:39 发布

冰雪奇缘lb

最新推荐文章于 2024-01-23 11:29:39 发布

阅读量269

点赞数

分类专栏： Vue 文章标签： v-on

本文链接：https://blog.csdn.net/weixin_44682587/article/details/102925003

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

v-on中单击事件、双击事件、鼠标划过事件

v-on事件绑定涉及的内容还不少，下面是我总结的部分内容：

v-on相当于监听，监听到相关操作可以直接运行后面所跟的内容，例：<button v-on:click="age++">add a year</button>也可以调用函数，例<button v-on:click="age--">subtract a year</button>
v-on可以用简写形式，用@来代替。例如：<button @click="add(1)">add a year</button>
v-on后面所跟的函数带不带括号都行（无参数情况下）例：<button v-on:click="add（）">add a year</button>和<button v-on:click="add">add a year</button>等价。

click和dblclick事件

click是单击事件，dblclick是双击事件。被dblclick绑定的单击无效果。

mousemove事件

mousemove是鼠标划过监听事件，使用方法如下：<div id="canvas" v-on:mousemove="updateXY"> {{x}},{{y}} </div>，当我们把鼠标划过时，它其实会给我们提供一个事件对象，例如下面的代码示例：

 data() {
            return {
                age: 30,
                x: 0,
                y: 0
            };
        },

  <div id="canvas" v-on:mousemove="updateXY">
            {{x}},{{y}}
        </div>

updateXY(event) {
                this.x = event.offsetX;//对象所包含的获取横坐标方法
                this.y = event.offsetY;
            },

完整代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        #canvas {
            width: 600px;
            padding: 200px 20px;
            text-align: center;
            border: 1px solid #333;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <h1>Events</h1>
        <!-- <button v-on:click="age++">add a year</button> -->
        <!-- <button @click="age++">add a year</button> -->
        <!-- <button v-on:click="age--">subtract a year</button> -->
        <!-- <button @click="age--">subtract a year</button> -->
        <button @click="add(1)">add a year</button><!-- @click单击触发 -->
        <button @click="subtract(1)">subtract a year</button>
        <button @dblclick="add(10)">add a year</button><!-- @dblclick双击触发 -->
        <button @dblclick="subtract(10)">subtract a year</button>
        <p>我的年龄是：{{age}}</p>


        <!-- mousemove envent -->
        <div id="canvas" v-on:mousemove="updateXY">
            {{x}},{{y}}
        </div>

    </div>

</body>
<script>
    new Vue({
        el: '#vue-app',
        data() {
            return {
                age: 30,
                x: 0,
                y: 0
            };
        },
        methods: {
            add(inc) {
                this.age += inc;
            },
            subtract(dec) {
                this.age -= dec;
            },
            updateXY(event) {
                // console.log(event);
                this.x = event.offsetX;
                this.y = event.offsetY;
            },
        }
    })
</script>

</html>

冰雪奇缘lb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-on事件绑定

v-on中单击事件、双击事件、鼠标划过事件v-on事件绑定涉及的内容还不少，下面是我总结的部分内容：v-on相当于监听，监听到相关操作可以直接运行后面所跟的内容，例：<button v-on:click="age++">add a year</button>也可以调用函数，例<button v-on:click="age--">subtract a yea...
复制链接

扫一扫

专栏目录