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 ...
随机推荐
- Maven 依赖范围 scope 属性详解
依赖范围就是用来控制依赖与三种 classpath(编译 classpath.测试 classpath.运行 classpath)的关系. 依赖范围(scope) 对于编译 classpath 有效 ...
- springcloud注解解释
@SpringBootApplication是springboot启动类,包括三个注解,他们的作用分别是: @Configuration:表示将该类作用springboot配置文件类 @Enabl ...
- CSS制作导航栏
最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...
- web框架--tornado自定义分页
1.tornado_main.py #!/usr/bin/env python # -*- coding: utf-8 -*- import tornado.web import tornado.io ...
- openlayers上添加点击事件
有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息 openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的 ...
- 三层交换机RIP动态路由实验
一. 实验目的 1. 掌握三层交换机之间通过RIP协议实现网段互通的配置方法. 2. 理解动态实现方式与静态方式的不同 二. 应用环境 当两台三层交换机级联时,为了保证每台交换机上所连接的 ...
- Spring Cloud Gateway 结合配置中心限流
前言 上篇文章我讲过复杂的限流场景可以通过扩展RedisRateLimiter来实现自己的限流策略. 假设你领导给你安排了一个任务,具体需求如下: 针对具体的接口做限流 不同接口限流的力度可以不同 可 ...
- Salesforce 开发新工具 - Visual Studio Code
最近尝试使用Visual Studio Code来做Salesforce的开发工具,体验上比Sublime好用不少,介绍下详细步骤 第一步:下载对应版本的Visual Studio Code 下载地址 ...
- Salesforce 开发整理（十一） 自定义放大镜查找效果
有时候在自定义的visualforce页面上,需要实现系统标准的查找样式,当不能使用标准的style的时候,我们只能选择自定义实现,下面分享一个demo,预览效果如下: 实现代码,Visualforc ...
- NOI 2019 退役记
非常抱歉,因为不退役了,所以这篇退役记鸽了.