Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）

待我称王封你为后i 2022-03-09 01:46 474阅读 0赞

1、绑定监听@click:（以监听click为例，其他如keyup，用法类似）  
  v-on:click="fun"  
  @click="fun"  
  @click="fun(参数)"

<button @click="test1">test1</button>
      <button @click="test2('abc')">test2</button>
      <button @click="test3('abcd', $event)">test3</button>
     
      methods: {
          test1(eve) {//test1函数没有参数，默认传递 $event 
            alert(eve.target.innerHTML)  //test1
          },
          test2 (msg) { //test1函数有参数，传递该参数
            alert(msg)  // abc
          },
          test3 (msg, event) { //有参数，如果想获取到enevt，则函数中需要写 $event
            alert(msg+'---'+event.target.textContent)  // abcd---test3
          }
       }

2、@click.stop与@click.prevent

@click.stop 阻止事件冒泡

@click.prevent 阻止事件的默认行为，

<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>   //阻止a标签跳转，仅执行函数test4
    
    <form  action="/xxx"   @submit.prevent="test5">   //阻止表单提交，仅执行函数test5
    
        <input type="submit" value="注册">
    </form>

3、按键修饰符

@keyup.enter

//按下enter时，执行方法test7

<input type="text" @keyup.enter="test7">
    
    methods: {
    
          test7 (event) {
            console.log(event.keyCode)
            alert(event.target.value)
          }
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，474人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js按键修饰符及v-model修饰符

![9bf80c7e10d74e3d8ac3994208f9cba8.gif][] 目录一、按键修饰符（1）回车键按键修饰符示例（2）自定义按键修饰符示例二、

左手的ㄟ右手/ 2024年03月22日 10:49/ 0 赞/ 128 阅读

相关 Vue学习之旅Part4：Vue的按键修饰符和自定义按键修饰符

v-on除了有事件修饰符之外还有按键修饰符 Vue内部提供了一些按键修饰符按键修饰符即代替了键盘触发的事件举个栗子：`@keyup.enter="add"`

Love The Way You Lie/ 2023年05月21日 11:55/ 0 赞/ 106 阅读

相关 Vue 按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `Enter` 时调用

矫情吗；*/ 2022年12月22日 09:23/ 0 赞/ 266 阅读

相关 vue修饰符（事件修饰符，表单元素修饰符，按键修饰符）

注意修饰符可连缀事件修饰符 @事件名.修饰符=“” .prevent 拦截默认事件 .stop 拦截冒泡事件 .capture 改变事件执行顺序 .se

绝地灬酷狼/ 2022年11月29日 11:26/ 0 赞/ 316 阅读

相关 Vue修饰符（事件修饰符、按键修饰符...）

基本页面 1. 修饰符修饰符是由点开头的指令后缀来表示的 2. 下载vue.js并引入 3. 初始化vue实例 <!DOCTYPE html

秒速五厘米/ 2022年03月18日 08:38/ 0 赞/ 533 阅读

相关 Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）

1、绑定监听@click:（以监听click为例，其他如keyup，用法类似） v-on:click="fun" @click="fun" @click

待我称王封你为后i/ 2022年03月09日 01:46/ 0 赞/ 475 阅读

相关 Vue教程10(按键修饰符)

本文我们来介绍下按键修饰符。 Vue按键修饰符 1.准备页面沿用前面案例的页面 ![在这里插入图片描述][watermark_type_ZmFuZ3p

Dear 丶/ 2021年12月05日 00:59/ 0 赞/ 340 阅读

相关 Vue学习之按键修饰符

Vue按键修饰符 1.准备页面沿用前面案例的页面 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

小灰灰/ 2021年11月30日 01:10/ 0 赞/ 454 阅读

相关 vue基础事件＼按键修饰符

事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropaga

灰太狼/ 2021年10月09日 03:32/ 0 赞/ 482 阅读

相关前端框架vue.js系列（4）：事件修饰符与按键修饰符

vue修饰符是指在触发事件或按键时额外的触发条件或回调。比如点击事件只允许触发一次，可以使用@click.once。原生事件对象 vue可以通过以下方式，获取原

怼烎@/ 2021年09月14日 06:20/ 0 赞/ 436 阅读