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

待我称王封你为后i 2022-03-09 01:46 416阅读 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 条评论，416人围观）

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

相关阅读

相关 Vue 按键修饰符

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

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

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

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

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

相关 vue阻止事件冒泡@click.stop、默认行为@click.prevent、按键修饰符@keyup.enter

1、@click用法 @click="fun" @click="fun(参数)" v-on:click="fun"//完整写法 2、@cl

深藏阁楼爱情的钟/ 2022年11月25日 00:36/ 0 赞/ 410 阅读

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

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

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

相关 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 赞/ 417 阅读

相关 vue 修饰符

[`.lazy`][.lazy] 在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步 (除了[上述][Link 1]输入法组合

爱被打了一巴掌/ 2021年12月23日 23:25/ 0 赞/ 242 阅读

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

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

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

相关 Vue学习之按键修饰符

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

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

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

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

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

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

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

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