Vue指令之v-on

news2024/11/23 13:22:19

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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1307407.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据可视化作用探析

数据可视化是一种将数据转化为图表、图形或其他视觉形式的过程&#xff0c;旨在更直观、更易于理解地展示数据信息。它不仅仅是对数据的简单呈现&#xff0c;更是一种利用视觉化手段帮助人们理解数据、发现模式、分析趋势和做出决策的强大工具。今天&#xff0c;我就从可视化从…

RocketMQ可视化工具 打包遇到的yarn intall 问题

文章目录 RocketMQ可视化工具1.github上下载2.修改参数3.运行4.打包5.出错6.解决7.重试8.再解决9.很奇怪运行没错&#xff0c;但是测试错啦10.不想深究&#xff0c;直接跳过测试11.展示成功 RocketMQ可视化工具 1.github上下载 下载地址 https://github.com/apache/rocketmq-…

在Windows 11中打开任务管理器的7种方法,总有一种很适用

​本文介绍了如何在Windows 11中打开任务管理器。使用Windows任务管理器,你可以跟踪系统进程、监视资源使用情况和强制停止应用程序。 如何使用搜索栏打开任务管理器 在Windows 11中访问任务管理器的一种更简单的方法是使用搜索栏。 1、按Windows键+S或选择任务栏中的“搜索…

Nodejs 第二十二章(脚手架)

编写自己的脚手架 那什么是脚手架&#xff1f; 例如:vue-cli Angular CLI Create React App 编写自己的脚手架是指创建一个定制化的工具&#xff0c;用于快速生成项目的基础结构和代码文件&#xff0c;以及提供一些常用的命令和功能。通过编写自己的脚手架&#xff0c;你可以…

值类型相关函数与对象类型相关函数内存调用过程

值类型相关函数内存调用&#xff1a; 先来看这样一段代码&#xff0c;你认为它的运行结果是多少呢&#xff1f; 20和11还是20和10&#xff1f; package org.example;public class Main {public static void main(String[] args) {int a10;add(a);System.out.println(a);}pub…

【INTEL(ALTERA)】Agilex7 FPGA Development Kit DK-DEV-AGI027R1BES编程/烧录/烧写/下载步骤

DK-DEV-AGI027R1BES 的编程步骤&#xff1a; 将外部 USB Blaster II 连接到 J10- 外部 JTAG 接头。将交换机 SW5.3 设置为 ON&#xff08;首次&#xff09;。打开 英特尔 Quartus Prime Pro Edition 软件编程工具。单击 硬件设置 &#xff0c;然后选择 USB Blaster II。将硬件…

Unity_使用FairyGUI搭建登录页面

Unity_使用FairyGUI搭建登录页面 1. 使用FairyGUI准备一个UI界面&#xff0c;例如&#xff1a;以下登录 2. 发布导出&#xff08;发布路径设置为Unity的Asset下任何路径&#xff09; 3. Unity编辑器安装FairyGUI包资源&#xff08;在资源商店找见并存储为我的资源&#xff0c;…

图片怎么去文字水印?分享三个简单无痕方法

图片怎么去文字水印&#xff1f;大家在遇到好看的图片时&#xff0c;是否曾想过将其用作自己的头像&#xff1f;然而&#xff0c;很多时候从网上保存的图片会带有平台或作者的水印&#xff0c;这会严重影响头像的整体视觉效果&#xff0c;导致我们不得不放弃使用这张图片&#…

typename的两种用法

typename有两种用法&#xff0c;第一种用于声明模板时&#xff0c;表示模板类型参数&#xff0c;如下所示。在用于模板声明时&#xff0c;typename 和 class 等价&#xff0c;具有同等含义。 template<typename T> class MyClass; // 等价于 template<class T> cl…

从零开始学机器学习,这些学习网站让你事半功倍!

介绍&#xff1a;机器学习是人工智能&#xff08;AI&#xff09;和计算机科学的一个分支&#xff0c;它专注于使用数据和算法&#xff0c;模仿人类学习的方式&#xff0c;逐步提高自身的准确性。更具体来说&#xff0c;机器学习是一门关于数据学习的科学技术&#xff0c;它能帮…

Postswigger 靶场 XSS 通关

文章目录 PostSwigger靶场XSS通关学徒&#xff1a;第一关学徒&#xff1a;第二关学徒&#xff1a;第三关学徒&#xff1a;第四关学徒&#xff1a;第五关学徒&#xff1a;第六关学徒&#xff1a;第七关学徒&#xff1a;第八关学徒&#xff1a;第九关 PostSwigger靶场XSS通关 靶…

VCSA7.0加入Windows AD域失败的处理过程

一、问题现象 vcsa7.0加入AD域时提示“Idm client exception: Error trying to join AD, error code 2453” 二、处理过程 &#xff08;一&#xff09;检查是否DNS问题 查看dns是否设置正确&#xff0c;如下&#xff1a; 1. Enable SSH on VCSA. 2. Command> shell 3…

高质量渲染效果的硬件要求!云渲染效果的作用优势

​在数字内容创作的世界里&#xff0c;渲染技术始终是提高视觉效果和最终产物质量的关键环节。无论是影视制作、游戏开发还是建筑可视化&#xff0c;高品质的渲染结果对于传达设计理念和吸引观众都至关重要。本文将讨论实现这些高质量渲染效果所需的硬件要求&#xff0c;探讨CP…

程序中关于时间和比较运算符的单词

时间 在日志中&#xff0c;我们经常碰到关于一些时间的单词缩写 比如这个Fri Dec 1 就代表了Friday &#xff08;星期五&#xff09;&#xff0c; December &#xff08;十二月&#xff09; 12月1日星期五 或者使用date查看时间的时候 dateWed Dec 13 05:55:54 PM CST 2023这…

【Hive】——DDL(CREATE TABLE)

1 CREATE TABLE 建表语法 2 Hive 数据类型 2.1 原生数据类型 2.2 复杂数据类型 2.3 Hive 隐式转换 2.4 Hive 显式转换 2.5 注意 3 SerDe机制 3.1 读写文件机制 3.2 SerDe相关语法 3.2.1 指定序列化类&#xff08;ROW FORMAT SERDE ‘’&#xff09; 3.2.2 指定分隔符&#xff0…

Shopee电商平台:跨境电商的领先者

Shopee是一家领先的跨境电商平台&#xff0c;由新加坡互联网公司Sea Group于2015年创立。自成立以来&#xff0c;Shopee凭借其强大的物流网络、安全快捷的收款方式、本地化的客服团队以及丰富的活动资源&#xff0c;赢得了全球用户的喜爱和信赖。本文将全面介绍Shopee的特点和优…

数据库运行sql文件,数据传输报错

这是什么原因啊&#xff01;太难弄了 my.cnf在/etc/my.cnf中进行设置 #最大连接数 max_connections200 #编码 character-set-serverutf8default-storage-engineINNODBsql_modeNO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES[mysql] #编码 default-character-setutf8

当大语言模型遇见广告:新变革还是新泡沫?

人工智能可能从未受到过如此之高的关注度。 2022年11月30日&#xff0c;OpenAI正式发布了ChatGPT&#xff0c;它是一款基于GPT3.5架构 1 进行训练的人工智能聊天机械人。ChatGPT像是一个全能的人&#xff0c;无论是有关文化、历史、艺术还是科技和商业的问题&#xff0c;它都能…

Tomcat主配置文件(server.xml)详解

前言 Tomcat主配置文件&#xff08;server.xml&#xff09;是Tomcat服务器的主要配置文件&#xff0c;文件位置在conf目录下&#xff0c;它包含了Tomcat的全局配置信息&#xff0c;包括监听端口、虚拟主机、安全配置、连接器等。 目录 1 server.xml组件类别 2 组件介绍 3 se…

Day35 贪心算法 part04

Day35 贪心算法 part04 860.柠檬水找零 pass 406.根据身高重建队列 pass