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 ...
随机推荐
- csp 201409-3 字符串匹配
问题描述: 很简单,判断给定串是否在目标串中出现.分区分大小写和不区分大小写两种情况. csp特点: csp的第三题一般是字符串的处理,c++的string类虽然不好用,但是掌握的话在考试的时候可能能 ...
- 洛谷 P1628 合并序列
洛谷 P1628 合并序列 题目传送门 题目描述 有N个单词和字符串T,按字典序输出以字符串T为前缀的所有单词. 输入格式 输入文件第一行包含一个正整数N: 接下来N行,每行一个单词,长度不超过100 ...
- Layui 文件上传 附带data数据
配置项中增加参数: , data: { CaseId: function () { return $("#CaseId option:selected").val(); }, Ca ...
- 解决PEnetwork启动的时候提示"An error occured while starting the "TCP/IP Registry Compatibility" Service (2)!"程序将立即退出的问题
解决PEnetwork启动的时候提示"An error occured while starting the "TCP/IP Registry Compatibility" ...
- eclipse 设置所有文件编码为UTF-8(最全)
如何修改eclipse工作空间的字符集以及项目的字符集? 第一种方式:修改eclipse的配置文件 打开{ECLIPSE_HOME}/eclipse.ini文件 在最后一行加上属性: -Dfile ...
- 推荐一款运动步行App爱步行
推荐一款运动步行App爱步行 1 介绍 爱步行,是一款倡导健步运动.绿色生活.提升散步乐趣的APP,让大众在享受运动的同时,让用户的每一步都能产生价值.爱步行以步数为基础,用户在每天的行走过程中,可以 ...
- ABP vNext中使用开源日志面板 LogDashboard
ABP vNext 使用 logdashboard 本文示例源码:https://github.com/liangshiw/LogDashboard/tree/master/samples/abpvn ...
- Zookeeper在linux上的安装
1:进入 cd /usr/local目录下 2:创建zookeeper目录 midir zookeeper 3:将压缩包复制到zookeeper目录下 cp /root/zookeeper/zo ...
- [转帖]从零开始入门 K8s | 手把手带你理解 etcd
从零开始入门 K8s | 手把手带你理解 etcd https://zhuanlan.zhihu.com/p/96721097 导读:etcd 是用于共享配置和服务发现的分布式.一致性的 KV 存储系 ...
- 二、hexo+github搭建个人博客的简单使用
使用hexo+github搭建一个可以外网访问的个人博客,此文用于记录博客初级的使用方法. 新建-编写-生成-部署文章的全过程 1.使用cmd完成 打开命令提示符[win+r输入cmd] 切换到自己本 ...