当前位置: 首页 > news >正文

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

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

文本框,绑定了一个按钮事件,对应的逻辑是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.lryc.cn/news/99850.html

相关文章:

  • 重要通知|关于JumpServer开源堡垒机V2版本产品生命周期的相关说明
  • 下载快 kaggle output
  • 结构型设计模式-1.代理设计模式
  • Python(四十九)获取列表指定元素的索引
  • 年轻人的第一套海景房
  • Vue输入内容/链接生成二维码
  • 使用langchain与你自己的数据对话(二):向量存储与嵌入
  • No105.精选前端面试题,享受每天的挑战和学习
  • 【计算机网络】第 3 课 - 计算机网络体系结构
  • 精细呵护:如何维护自己的电脑,提升性能和寿命
  • DevOps-Jenkins
  • Jasper裁员,成也GPT,败也GPT
  • 安卓开发后台应用周期循环获取位置信息上报服务器
  • 为什么你的独立站有流量没转化?如何做诊断检查?
  • 【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程
  • 【算法和数据结构】257、LeetCode二叉树的所有路径
  • yolov5的后处理解析
  • Java中注解应用场景
  • verilog
  • 基于springboot+mybatis+vue进销存管理信息系统
  • Keepalived 在CentOS安装
  • Lua语法学习
  • 【Ajax】笔记-jsonp实现原理
  • LLM - Chinese-Llama-2-7b 初体验
  • transformer代码注解
  • 【产品经理】高阶产品如何处理需求?(3方法论+2案例+1清单)
  • Neo4j数据库中导入CSV示例数据
  • 第四章 No.1树状数组的原理与使用
  • mysql(五)主从配置
  • 扫地机语音提示芯片,智能家居语音交互首选方案,WT588F02B-8S