vue 修饰符
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 修饰符的更多相关文章
- 理解vue 修饰符sync
也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...
- Vue 修饰符once的方法使用
once:只执行一次 代码: <!doctype html> <html lang="en"> <head> <meta charset= ...
- 深入理解vue 修饰符sync
[ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...
- 事件&vue修饰符
JavaScript 事件 HTML事件是发生在HTML元素上的事情.当在HTML页面帐使用JavaScript时,javascript可以触发这些事件 HTML 事件 HTML事件可以是浏览器的行为 ...
- 深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...
- vue修饰符学习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue修饰符
为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...
- vue 修饰符(转载)
大佬写的很详细,直接转载过来,随时可以参考, 原博:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html 事件处理 如果需要在 ...
- vue 修饰符 整理
事件修饰符 .stop <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> .preven ...
随机推荐
- 7个优秀的国内外移动端web框架(转)
淘宝SUI Mobile框架 (light7框架 官网:http://www.light7.cn/)官网地址:http://m.sui.taobao.org/ SUI Mobile 是一套基于 F ...
- Caused by: java.lang.NoSuchMethodError: org.apache.poi.hssf.usermodel.HSSFCell.setEncoding(S)V
java.lang.reflect.InvocationTargetException. Coused by : java.lang.NoSuchMethodError:这个异常是找不到方法,但是如 ...
- win10电脑只有自带浏览器能上网
今天遇到了个奇葩问题,开机后登陆微信,怎么也登陆不上,用360检测,修复不了,找来大神一枚,打开我的Edge浏览器,各种网页浏览正常.......就告诉我就修好了.WTF!!! 现象:只有自带浏览器能 ...
- 【sed】增加一列【shell文本处理】
有些简单的文本处理不需要写程序,利用awk和sed就可以很好的完成. 今天记录一下在已有文件中增加一列的方法 sed -i "s/^/Chr${i}\t&/g" file ...
- django2.0.6 连接使用redis集群
环境需要: django >= 1.8.x python 2.7 或者python >= 3.4 安装django-cluster-redis包: pip install django-r ...
- java0426 wen IO2
- C#调用VlcControl做一个播放器
开发环境: Visual Studio 2015 .Net Framework 4.5 1.新建一个Windows窗体应用程序 修改框架为.Net Framework 4.5 2.管理NuGet包 下 ...
- Java实训作业1
1.编写程序:声明一个整型变量a,并赋初值5,在程序中判断a是奇数还是偶数,然后输出判断的结果 2.编写程序:从键盘输入圆的半径,计算圆的面积并输出. 3.编写程序:实现一个数字加密器.运行时输入加密 ...
- java如何编写多线程
1.如何实现多线程 1.1实现Runnable接口,实现run()方法. public class Main4 implements Runnable { public static void mai ...
- Star in Parentheses
问题 A: Star in Parentheses 时间限制: 1 Sec 内存限制: 128 MB 题目描述 You are given a string S, which is balanced ...