Vue 常用指令 v-on 自定义参数,事件修饰符

news2024/11/6 3:12:19

自定义参数就是可以在触发事件的时候传入自定义的值。

文本框,绑定了一个按钮事件,对应的逻辑是sayhi,现在无论按下什么按钮都会触发这个sayhi。但是实际上不是所有的按钮都会触发,只会限定某一些按钮,最常见的按钮就是回车键。

之前跳过js jquery需要通过事件参数来判定触发的按钮是什么才可以限制触发的时机,但是在vue里面直接使用事件修饰符就行了。语法是点,后面跟上修饰符.enter就代表只要在回车键的时候才会触发这个逻辑。

限制触发的按键是回车键,使用事件修饰符,相对于之前需要结合事件参数来判断按下的按键,现在一个点就搞定了,这样更加灵活方便。

事件修饰符有很多,跟上不同的单词就行了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
       <button type="button" @click="btn(666,'lucas',[1,2,3])"  >按钮</button>
       <input type="text" @keyup.enter="sayhi()">
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    counter: 0
                }
            },
            methods:{
                btn(p1,p2,p3){
                  console.log(p1,p2,p3)
                },
                sayhi(){
                    alert("吃了吗")
                }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

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

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

相关文章

【C语言项目】多臂井径电子测井成像项目(一)

目录 1、目的和意义2、本章概述3、串口R2324、OpenGL5、开发环境6、环境配置6.1、VS安装OpenGL6.2、虚拟串口生成工具 7、成品速览参考文献 1、目的和意义 本项目为获取矿藏地层的油气当量和及时精确地测量含油、含气层的压力及温度值的需求&#xff0c;辅助生产管理人员完成对…

【Nginx】keepalived安装配置

环境说明 Centos 7版本 主机名 IP地址 其他 nginx 192.168.10.150 主 nginx-2 192.168.10.151 备 配置 主-192.168.10.150 [rootnginx ~]# yum install keepalived [rootnginx ~]# vim /etc/keepalived/keepalived.conf ! Configuration File for keepalived #定义全…

【2023Java 面试题全集】实用、全面、系统,助你一路通关!

前两个月&#xff0c;公司 java 岗位面了 50候选人&#xff0c;面试下来发现几类过不了的情况&#xff0c;分享大家防止踩坑&#xff1a; 新技术倒是掌握得挺多&#xff0c;基础的却一塌糊涂。 工作多年&#xff0c;从未学习过工作之外的技术栈&#xff0c;也没有对技术有任何…

Golang操作阿里云OSS上传文件

为什么要使用OSS&#xff1f;应用场景是什么&#xff1f; 最近在开发考试系统&#xff0c;里面需要上传课件&#xff0c;课件包括pdf&#xff0c;map等等各种类型的文件&#xff0c;这些文件不能像图片一样&#xff0c;直接上传到项目目录下面&#xff0c;需要单独存放&#x…

iOS开发-下拉刷新动画loading旋转指示器动画效果

iOS开发-下拉刷新动画loading旋转指示器动画效果 之前开发中实现下拉刷新动画loading旋转指示器动画效果 一、效果图 二、基础动画 CABasicAnimation类的使用方式就是基本的关键帧动画。 所谓关键帧动画&#xff0c;就是将Layer的属性作为KeyPath来注册&#xff0c;指定动画…

尚医通10:科室排班日期+科室排班详细数据+搭建平台用户系统前端环境

内容介绍 1、查看科室排班日期统计数据 2、查看科室排班详细数据 3、搭建平台用户系统前端环境 4、首页静态数据整合 5、首页数据显示接口 6、首页数据显示前端 查看科室排班日期统计数据 1确认需求 2、实现接口 1&#xff09;分析接口 *参数&#xff1a;page、limit、h…

C语言基础入门详解一

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 前言&#xff1a; 初识C语言 //#include 相当于java的import,stdio全称&#xff1a;st…

秒级体验本地调试远程 k8s 中的服务

点击上方蓝色字体&#xff0c;选择“设为星标” 回复”云原生“获取基础架构实践 背景 在这个以k8s为云os的时代&#xff0c;程序员在日常的开发过程中&#xff0c;肯定会遇到各种问题&#xff0c;比如&#xff1a;本地开发完&#xff0c;需要部署到远程k8s集群&#xff0c;本地…

【雕爷学编程】Arduino动手做(175)---机智云ESP8266开发板模块5

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

区间预测 | MATLAB实现VAR向量自回归时间序列区间预测

区间预测 | MATLAB实现VAR向量自回归时间序列区间预测 目录 区间预测 | MATLAB实现VAR向量自回归时间序列区间预测预测效果基本介绍程序设计参考资料预测效果 基本介绍 区间预测 | MATLAB实现VAR向量自回归时间序列区间预测 VAR(Vector Autoregression)模型是一种广泛应用于时…

pytest 自定义HOOK函数

除了系统提过的HOOK函数外&#xff0c;也可以通过自定义HOOK的方式实现想要的功能。 首先创建一个py文件&#xff0c;里面定义自己的HOOK函数&#xff0c;主要pytest里面的hook函数必须以pytest开头。 #myhook.pydef pytest_myhook(user):"""自定义HOOK函数&q…

SpringBoot项目部署(前后端分离、Linux部署项目)

一、架构 部署环境说明&#xff1a; 192.168.122.100(服务器A)&#xff1a; Nginx&#xff1a;部署前端项目、配置反向代理 Mysql&#xff1a;主从复制结构中的主库 192.168.122.131 (服务器B)&#xff1a; jdk: 运行Java项目 git:版本控制工具 (从gitee中拉取源码) maven:…

No104.精选前端面试题,享受每天的挑战和学习(小米)

文章目录 聊一下vue和react的区别react生命周期有哪些hooks解决了什么问题小程序跳转传参怎么传附录&#xff1a;「简历必备」前后端实战项目&#xff08;推荐&#xff1a;⭐️⭐️⭐️⭐️⭐️&#xff09; &#x1f4c8;「作者简介」&#xff1a;前端开发工程师 | 蓝桥云课签…

CenOS设置启动级别

背景知识 init一共分为7个级别&#xff0c;这7个级别的所代表的含义如下 0&#xff1a;停机或者关机&#xff08;千万不能将initdefault设置为0&#xff09;1&#xff1a;单用户模式&#xff0c;只root用户进行维护2&#xff1a;多用户模式&#xff0c;不能使用NFS(Net File S…

Banana Pi BPI-CM4 评测(计算模块 4),更快性能,旨在替换树莓派CM4

如果您正在寻找可靠的单板计算机来提升您的下一个项目&#xff0c;但无法找到满足您需求的 Raspberry Pi&#xff0c;请看看我是否可以提供帮助。在这篇详细的评论中&#xff0c;我将向您介绍 Banana Pi CM4&#xff0c;这是一款适用于各种任务的多功能且强大的解决方案。从经验…

Blazor前后端框架Known-V1.2.8

V1.2.8 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazor…

太强了~ 这份《23 种设计模式加强版》宝典,阿里 P8 都得细细研究

说在前面的话 Java 作为老牌纯正的编程语言&#xff0c;在规范性上有着天然优势。因此本版的设计模式讲解全部用 Java 语言来描述&#xff0c;并针对 Java 语言的特性对讲解内容做了相当大的改动。 不知道大家是否听过编程界的一段话&#xff1a;掌握设计模式相当于华山派的&…

信号和槽函数的扩展

信号和槽函数的扩展 一个信号连接多个槽函数一个槽函数连接多个信号信号连接信号 一个信号可以连接多个槽函数, 发送一个信号有多个处理动作 需要写多个connect&#xff08;&#xff09;连接槽函数的执行顺序和信号的发射顺序相同&#xff08;QT5中&#xff09;信号的接收者可…

C#实现读写CSV文件的方法详解

目录 CSV文件标准 文件示例RFC 4180简化标准读写CSV文件 使用CsvHelper使用自定义方法总结 项目中经常遇到CSV文件的读写需求&#xff0c;其中的难点主要是CSV文件的解析。本文会介绍CsvHelper、TextFieldParser、正则表达式三种解析CSV文件的方法&#xff0c;顺带也会介绍一…

SpringBoot中MongoDB的使用

SpringBoot中MongoDB的使用 MongoDB 是最早热门非关系数据库的之一&#xff0c;使用也比较普遍&#xff0c;一般会用做离线数据分析来使用&#xff0c;放到内网的居 多。由于很多公司使用了云服务&#xff0c;服务器默认都开放了外网地址&#xff0c;导致前一阵子大批 MongoD…