VUE--v-on修饰符
时间:2019-10-21
本文章向大家介绍VUE--v-on修饰符,主要包括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>
原文地址:https://www.cnblogs.com/DreamchaserHe/p/11714073.html
- 用 LSTM 做时间序列预测的一个小例子
- Java并发编程的艺术(十一)——线程池(2)
- Java并发编程的艺术(十)——线程池(1)
- Tensorflow on Spark爬坑指南
- Boost asio 官方教程
- 0基础教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)
- 柴毛毛大话设计模式——开发常用的设计模式梳理
- Redis源码分析(四)——Redis数据结构-整数集合
- Redis源码分析(三)——Redis数据结构-字典
- Redis源码分析(二)——Redis数据结构-链表
- C++实现神经网络之一 | Net类的设计和神经网络的初始化
- Redis源码分析(一)——Redis数据结构-字符串SDS
- 使用RNN预测股票价格系列二
- 微软 WCF的几种寄宿方式,寄宿IIS、寄宿winform、寄宿控制台、寄宿Windows服务
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 给Linux增加swap内存
- 网鼎杯2018-Fakebook
- 强网杯2019-高明的黑客
- CISCN2019华北赛区Day2-HackWorld
- ZJCTF-NiZhuanSiWei
- xxe漏洞学习
- De1CTF2019-SSRFME
- BJDCTF2nd-EasyMd5
- BJDCTF2nd-fakegoogle
- java_Scanner类、Random类、ArrayList 类的使用
- 使用Python获取Oracle索引信息
- 监控Oracle数据泵状态
- MySQL MHA部署 Part 5 MHA部署指南
- MySQL MHA部署 Part 6 MHA故障转移测试
- 一步步搭建基于GTID的MySQL复制