Vue指令之v-on

2023-12-13 18:17:37

v-on指令用于注册事件,作用是添加监听与提供事件触发后对应的处理函数。

v-on有两种语法,在提供处理函数的时候既可以直接使用内联语句,也可以提供函数的名字。

第一种语法是直接提供内联语句,如下

v-on:事件名 = "内联语句"

Tips:注意v-on:的冒号后面不要加空格,加上之后会导致事件不响应。

举个例子,要实现两个加减按钮控制显示数字的增减,可以如下编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id="app">
        <!-- 按钮,v-on:后别加空格 -->
        <button v-on:click="number--">-</button>
        <!-- sapn是小盒子,一行可以多个(div是大盒子,一行只能有一个) -->
        <span>{{ number }}</span>
        <button v-on:click="number++">+</button>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                number: 100,
            }
        })
    </script>
</body>
</html>

v-on:click表示监听点击事件,而等号后面则是出现了点击事件后要执行的语句。渲染后效果如下,可以点击按钮实现数字的增减。
在这里插入图片描述
click换成其他事件同样成立,比如鼠标进入事件mouseenter

同时,v-on:可以简写成@,如下,可以实现同样的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id="app">
        <!-- 按钮 -->
        <button @mouseenter="number--">-</button>
        <!-- sapn是小盒子,一行可以多个(div是大盒子,一行只能有一个) -->
        <span>{{ number }}</span>
        <button @mouseenter="number++">+</button>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                number: 100,
            }
        })
    </script>
</body>
</html>

显然,直接写内联语句适用于一些简单的功能,而复杂的功能则最好用函数来写,因此v-on的第二种语法就是传入函数名,改函数名应在实例化Vue实例的时候由methods属性提供。

v-on:事件名 = "methods中的函数名"

在下面的例子中,我们用一个按钮来控制文本的显示/隐藏,将该功能写在methods中的函数reverse中,使得控制该文本显示的变量翻转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id="app">
        <!-- 传入函数名reverse -->
        <button @click="reverse">display/hide</button>
        <div v-show="isShown">ShadyPi</div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                isShown: true,
            },
            methods: {
                reverse () {
                    //注意这里要加app.或this.,否则找不到该变量
                    this.isShown = !this.isShown
                    console.log("click button")
                }
            }
        })
    </script>
</body>
</html>

点击按钮,即可控制文本显示隐藏,同时控制台输出调试信息。
在这里插入图片描述
自然地,这个函数也可以有参数传入,比如设置多个按钮,一个+3,一个+10.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id="app">
        <div>{{ number }}</div>
        <button @click="add(3)">+3</button>
        <button @click="add(10)">+10</button>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                number: 100,
            },
            methods: {
                add (delta) {
                    this.number += delta
                }
            }
        })
    </script>
</body>
</html>

可以实现为数字加上不同的值得功能。
在这里插入图片描述

文章来源:https://blog.csdn.net/ShadyPi/article/details/134972812
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。