Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once

1、事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a> 2、按键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名:

  • .enter
  • .tab
  • .delete (捕获 "删除" 和 "退格" 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta

lazy:在改变后才触发(也就是说只有光标离开input输入框的时候值才会改变)

<input v-model.lazy="msg" >

number:将输出字符串转为Number类型·(虽然type类型定义了是number类型,但是如果输入字符串,输出的是string)

<input v-model.number="age" type="number">

trim:自动过滤用户输入的首尾空格

<input v-model.lazy.trim="msg" >
 

vue 修饰符的更多相关文章

  1. 理解vue 修饰符sync

    也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...

  2. Vue 修饰符once的方法使用

    once:只执行一次 代码: <!doctype html> <html lang="en"> <head> <meta charset= ...

  3. 深入理解vue 修饰符sync

    [ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...

  4. 事件&vue修饰符

    JavaScript 事件 HTML事件是发生在HTML元素上的事情.当在HTML页面帐使用JavaScript时,javascript可以触发这些事件 HTML 事件 HTML事件可以是浏览器的行为 ...

  5. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  6. vue修饰符学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. Vue修饰符

    为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...

  8. vue 修饰符(转载)

    大佬写的很详细,直接转载过来,随时可以参考, 原博:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html 事件处理 如果需要在 ...

  9. vue 修饰符 整理

    事件修饰符 .stop <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> .preven ...

随机推荐

  1. 7个优秀的国内外移动端web框架(转)

    淘宝SUI Mobile框架   (light7框架 官网:http://www.light7.cn/)官网地址:http://m.sui.taobao.org/ SUI Mobile 是一套基于 F ...

  2. Caused by: java.lang.NoSuchMethodError: org.apache.poi.hssf.usermodel.HSSFCell.setEncoding(S)V

    java.lang.reflect.InvocationTargetException.  Coused by : java.lang.NoSuchMethodError:这个异常是找不到方法,但是如 ...

  3. win10电脑只有自带浏览器能上网

    今天遇到了个奇葩问题,开机后登陆微信,怎么也登陆不上,用360检测,修复不了,找来大神一枚,打开我的Edge浏览器,各种网页浏览正常.......就告诉我就修好了.WTF!!! 现象:只有自带浏览器能 ...

  4. 【sed】增加一列【shell文本处理】

    有些简单的文本处理不需要写程序,利用awk和sed就可以很好的完成. 今天记录一下在已有文件中增加一列的方法 sed -i "s/^/Chr${i}\t&/g" file ...

  5. django2.0.6 连接使用redis集群

    环境需要: django >= 1.8.x python 2.7 或者python >= 3.4 安装django-cluster-redis包: pip install django-r ...

  6. java0426 wen IO2

  7. C#调用VlcControl做一个播放器

    开发环境: Visual Studio 2015 .Net Framework 4.5 1.新建一个Windows窗体应用程序 修改框架为.Net Framework 4.5 2.管理NuGet包 下 ...

  8. Java实训作业1

    1.编写程序:声明一个整型变量a,并赋初值5,在程序中判断a是奇数还是偶数,然后输出判断的结果 2.编写程序:从键盘输入圆的半径,计算圆的面积并输出. 3.编写程序:实现一个数字加密器.运行时输入加密 ...

  9. java如何编写多线程

    1.如何实现多线程 1.1实现Runnable接口,实现run()方法. public class Main4 implements Runnable { public static void mai ...

  10. Star in Parentheses

    问题 A: Star in Parentheses 时间限制: 1 Sec  内存限制: 128 MB 题目描述 You are given a string S, which is balanced ...