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 ...
随机推荐
- IP地址 0.0.0.0 是什么意思?
IP地址0.0.0.0是什么意思? 根据RFC文档描述,它不只是代表本机,0.0.0.0/8可以表示本网络中的所有主机,0.0.0.0/32可以用作本机的源地址,0.0.0.0/8也可表示本网络上的某 ...
- 【转载】pycharm破解,可使用到2099年.pycharm版本 pycharm-professional-2016.3.1
1. Pycharm的安装方法,论坛很多,这里就不赘述了.参照:http://blog.csdn.net/qq_29883591/article/details/52664478 2. 下载Pycha ...
- mysql 事物没提交导致事物一直运行解决方案
1.设置 innodb_kill_idle_transaction 参数, 可以永久避免 https://dbaplus.cn/news-11-974-1.html
- day07数据类型的相互转化,字符编码
复习 ''' 1.深浅拷贝 ls = [1, 'a', [10]] 值拷贝:直接赋值 ls1 = ls, ls中的任何值发生改变,ls1中的值都会随之改变 浅拷贝:通过copy()方法 ls2 = l ...
- ES6常用语法(上)
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应 ...
- Pandas数据处理+Matplotlib绘图案例
利用pandas对数据进行预处理然后再使用matplotlib对处理后的数据进行数据可视化是数据分析中常用的方法. 第一组例子(星巴克咖啡店) 假如我们现在有这样一组数据:星巴克在全球的咖啡店信息,如 ...
- UVA11996 Jewel Magic
思路 splay维护序列的hash值即可 因为有rev操作,还要维护反串的hash值 代码 #include <cstdio> #include <cstring> #incl ...
- mui上拉加载会影响页面中的某些点击事件
项目是vue写的(移动端) <div class="mui-scroll"> <a :href="bannerinfo.activity_url&quo ...
- pycharm使用selenium之前
2.python安装好后,查看你的pycharm输出控制台,第一行就写了你所使用的python.exe的路径,如下图箭头处所示: 检查python使用的是不是你刚刚安装的,如果不是,换成你刚刚安装的p ...
- ZJOI2019游记
Day-2 本蒟蒻有幸能去参加ZJOI2019,然而出发前就做好了爆0的准备. 坐了差不多6,7个小时的车,车上基本就是在颓知乎和打雀,然后就到了酒店. 招宝山酒店--本人住过的第一个四星级酒店,看上 ...