VUE--v-on修饰符
1、v-on的修饰符
.stop:阻止事件冒泡
<div @click="getTitle">
阿Q
<button @click="getBut">按钮</button>
<button @click.stop="getBut2">按钮2</button>
</div>
.prevent：阻止默认行为
<form action="Baidu">
<input type="submit" value="提交">
<input type="submit" value="提交" @click.prevent="getSubmit">
</form>
.enter:监听enter(确认)键的情况-------（按下\弹起）
<input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">
.once：事件只触发一次
<button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>
******完整代码*******
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<div id="app">
<div @click="getTitle">
阿Q
<button @click="getBut">按钮</button>
<button @click.stop="getBut2">按钮2</button>
</div>
<br> <form action="Baidu">
<input type="submit" value="提交">
<input type="submit" value="提交" @click.prevent="getSubmit">
</form>
<br> <input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">
<br>
<br> <button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>
</div> <body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({ }),
methods: {
getTitle: () => {
console.log("啊Q")
},
getBut: () => {
console.log('Btn')
},
getBut2: () => {
console.log('Btn2')
},
getSubmit: () => {
console.log('getSubmit')
},
getKeyup: () => {
console.log('getKeyup')
},
getOnce: () => {
console.log('getOnce')
}
}
})
</script>
</body> </html>
VUE--v-on修饰符的更多相关文章
- vue中的修饰符
Vue2.0学习笔记:Vue事件修饰符的使用 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...
- Vue的事件修饰符
转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
- vue中.sync 修饰符
一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...
- Vue表单修饰符（lazy,number,trim）
lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步 <div id="example"> <input type="text ...
- 027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 指令和修饰符
1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <spanv-text="msg"></span> 这两者 ...
- Vue 自定义按键修饰符
如点击F2 触发某个事件 <input type="button" name="" id="" value="添加" ...
- VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- opencv获得轮廓内的所有坐标
std::vector<std::vector<cv::Point>> fillContour(const std::vector<std::vector<cv:: ...
- ubuntu自定义截图截图
如果只需要获取一张屏幕截图,不对其进行编辑的话,那么键盘的默认快捷键就可以满足要求了.而且不仅仅是 Ubuntu ,绝大部分的 Linux 发行版和桌面环境都支持以下这些快捷键: PrtSc – 获取 ...
- LG1155 「NOIP2008」双栈排序 二分图判定
问题描述 LG1155 题解 \(i,j\)如果不能进入一个栈,要满足存在\(k\),使得\(i<j<k\)且\(a_k<a_i<a_j\) 如果\(i,j\)不能进入一个栈, ...
- Windows/Linux下jdk环境配置
Windows 7下: Windows7 x64位系统 安装好java 1.点击开始菜单选择计算机选项右键选择属性选项 即可 2.然后在属性界面点击如图所示的高级系统设置选项 3.打开系统属性界面然后 ...
- javascript中的e是什么意思？
e 代表事件(event)对象,即所谓的事件驱动源,包含了许多属性和方法.下面以鼠标点击事件为例,作一个测试: (HTML) <!DOCTYPE html> <html> &l ...
- thymeleaf实现热部署
热部署可以在修改页面之后,不重新启动服务器也能查看修改效果. 1.导入依赖,我用的是gradle,使用maven的可以去https://mvnrepository.com/寻找对应的依赖 compil ...
- SQL Server 迁移数据库 （二）分离和附加
分离和附加其实比导入和导出,步骤要少一些,但是数据量大的话,跨服务器拷贝数据文件可能要慢一些 1. 分离数据库 这里最好选择断开链接,断开之前要确保你记得数据库的路径,一般默认都是C:\Program ...
- 数论问题(1) : poj 1061
最近,本人发现了一个新网站poj(不算新) 当然了,上面的资源很好...... 就是还没搞清楚它的搜索该怎么弄,如果有大佬能教教我怎么弄,请在下方留言 闲话少说,回归我们的正题 题目转自poj 106 ...
- Ubuntu 14.04 apt-get update失效解决（转）
现象如下: VirtualBox:~$ sudo apt-get update Err http://mirrors.aliyun.com trusty InRelease Err http://mi ...
- STM32开发/烧录/调试环境搭建 基于:Win10+STM32Cube+openocd+cmsis-dap(dap-link)
dap-link是个不错的STM32下载/调试工具,然而STM32Cube并没有直接支持它,只能通过openocd的方式间接支持. 网络上虽然已经有了其他人的教程,不过基本都是基于linux或者msy ...