首页 > 其他分享 >v-on(简写为@)的使用

v-on(简写为@)的使用

时间:2024-04-13 21:55:41浏览次数:28  
标签:绑定 可以 修饰符 点击 事件 使用 简写 页面

v-on的作用为绑定一个事件

v-on可以 缩写:@

v-on可以与点击(click),鼠标移出(mouseout)等事件进行绑定,只要是JS的方法都可以进行定义

在v-on指令中,还可以添加修饰符

 以上修饰符都可以在进行事件绑定时进行修饰

其中,.prevent修饰符,可以阻止页面的跳转,阻止默认事件

在上述的修饰符中,因记住.once修饰符,最多触发一次处理函数

 

动态事件的绑定:

 可以根基event的值动态的切换绑定的事件

v-on绑定的事件传值如下图所示

 上述代码绑定了一个click事件,响应的函数为handleClick,并且使用了修饰符.once这表明了,在这个页面中,这个点击事件只会响应一次

该方法还传递了两个参数,一个字符串,一个$event事件对象

运行页面如下图:

 点击了按钮,会出现hello内容的弹框

点击确定后,会在控制台打印事件对象的属性

 但在此点击,事件就没有进行响应了

标签:绑定,可以,修饰符,点击,事件,使用,简写,页面
From: https://www.cnblogs.com/123-hh/p/18133440

相关文章

  • 在Linux中,如何使用expect进行自动化交互式应用程序测试?
    expect是一个用于自动化交互式应用程序测试的工具,它允许你编写脚本来模拟用户与程序的交互。expect脚本通过发送预定义的字符串(如密码提示、菜单选择等)到正在运行的程序,并等待特定的响应,从而实现自动化控制。1.安装expect在大多数Linux发行版中,expect可以通过包管理器安装:sudo......
  • 在Linux中,如何使用shell脚本进行系统监控和报告?
    在Linux中,使用shell脚本进行系统监控和报告是一种自动化管理任务的有效方法。脚本可以定期收集系统的关键信息,生成报告,并在发现问题时通知管理员。以下是创建这样一个脚本的基本步骤:1.确定监控目标首先,确定你需要监控的系统指标,如CPU使用率、内存使用、磁盘空间、网络流量、服......
  • 在Linux中,如何使用cron和at命令进行任务调度?
    在Linux中,cron和at命令是两个用于任务调度的工具。它们允许用户安排在特定时间或日期执行脚本或命令。1.使用cron进行任务调度cron是一个基于时间的作业调度器,它在后台运行并定期检查crontab中的作业,然后执行它们。编辑crontab文件:查看当前用户的crontab文件:crontab-l......
  • VMware15显示“该虚拟机要求使用 AVX2,但 AVX 不存在”
    版本:VM:15.5.7build-17171714虚拟机:rhel-8.8-x86_64-dvd地址:D:\Users\q2383\Documents\VirtualMachines\RedHatEnterpriseLinux864位\RedHatEnterpriseLinux864位.vmx1.修改内容点击查看代码.encoding="GBK"config.version="8"virtualH......
  • VSCode使用Go插件
    本文更新于2023-12-26,使用VSCode1.85.1、Go插件v0.40.1。安装Go插件:使用Ctrl+Shift+X打开扩展面板,搜索“Go”,安装“Go”插件(GoforVisualStudioCode)。安装Go插件的依赖工具:因国内无法访问proxy.golang.org,故需自行配置模块代理。运行cmd。在cmd中运行setGOPROXY=h......
  • VM虚拟机显示“客户机操作系统已禁用cpu”及“该虚拟机要求使用 AVX2,但 AVX 不存在”
    版本:VM:15.5.7build-17171714虚拟机:rhel-8.8-x86_64-dvd地址:D:\Users\q2383\Documents\VirtualMachines\RedHatEnterpriseLinux864位\RedHatEnterpriseLinux864位.vmx问题:客户机操作系统已禁用cpu1.添加内容点击查看代码.encoding="GBK"config.version=......
  • UE UDebugDrawService 使用心得
    图片来源:(7)UnrealEngine5Tutorial-NPCAIPart3:MassAIAnimated-YouTube有这样一个Debug信息是非常酷也非常有用的东西绘制逻辑位于GameplayDebuggerCategory_Mass.cpp,代码非常的长,这里就不展示了源码流程如下图 前方施工中……......
  • OB导数工具使用经验分享
    一、前言OBDUMPER/OBLOADER是OceanBase官方推出的数据导出导入工具,可以用于OB租户间的数据迁移,对OB租户进行逻辑备份。不同于MySQL的MyDumper是C语言开发,OBDUMPER/OBLOADER是由java语言开发,因此它具备跨平台兼容性(x86/arm)。关于OBDUMPER/OBLOADER是一个功能非常丰富的工具,其使用......
  • go语言结构体使用小结
    转载请注明出处:在Go语言中,结构体(struct)是一种复合数据类型,它允许你将多个不同类型的字段组合成一个单一的类型。结构体为数据的封装和抽象提供了便利,使得数据组织更加清晰和易于管理。结构体的定义结构体的定义使用type关键字和struct类型,然后列出结构体的字段名和类型......
  • React状态与引用(Refs)- 差异和使用场景
    在本文中,我们将深入比较React的state和refs,探讨它们在特定场景下的适用性。当需要在React应用程序中存储数据时,首先要考虑的问题是:“数据是否在组件的生命周期内的某个时刻发生变化?”如果不会,那么普通的const变量非常适合。然而,如果数据会发生变化,那么就需要使用useState和useR......