vue之input输入框的几个事件
事件简介
click 点击事件，一般不会用于input输入框，会用于按钮，用于输入框就有点像focus了，当点击输入框时会触发
blur 失去焦点事件，当失去焦点时会触发。
focus 获取焦点事件，当获得焦点时会触发。
input 在输入框中每输入一个字符都会触发一次
change 当输入框内容改变了，且失去焦点的时候会触发（注意，内容没改变是不会触发的！）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jQuery.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>点击时就会触发，一般用于点击按钮</p>
<input type="text" @click="clickBtn">
<p>失去焦点时就会触发</p>
<input type="text" @blur="blurFunc">
<p>获取焦点时就会触发</p>
<input type="text" @focus="focusFunc">
<p>每输入一个字符都会触发</p>
<input type="text" @input="inputFunc">
<p>当输入框内容改变了，且失去焦点的时候会触发（注意，内容没改变是不会触发的！）</p>
<input type="text" @change="changeFunc">
</div>
</body>
<script>
vm = new Vue({
el: '#app',
data: {
d1: {name: 'zzz', age: 10}
},
methods: {
clickBtn(){
console.log('click事件')
},
blurFunc(){
console.log('blur事件')
},
focusFunc(){
console.log('focus事件')
},
inputFunc(){
console.log('input事件')
},
changeFunc(){
console.log('change事件')
},
}
})
</script>
</html>
vue之input输入框的几个事件的更多相关文章
- vue中input输入框的模糊查询实现
最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...
- input输入框change和blur事件区别
blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外. 1.没有进行任何输入时,不会触发change 在这种情况下失焦后, ...
- vue实现input输入框的模糊查询
最近在用uni-app做一个项目,使用的框架还是vue,想了好久才做出来 . HTML代码部分 <input type="text" focus class="s ...
- input 输入框两种改变事件的方式
一.在输入框内容变化的时候不会触发,当鼠标在其他地方点一下才会触发 $('input[name=myInput]').change(function() { ... }); 二.在输入框内容变化的时候 ...
- Vue触发input选取文件点击事件
CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display ...
- oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...
- vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo ...
- input输入框file类型第二次不触发onchange事件的解决办法，简单有效
在网上看了很多办法,现在将网上大部分说法总结如下: 网上说法: 原因:选择一次后onchange事件没有绑定到input标签上: 解决办法:拷贝一份input标签的副本,每次选择后对原input ...
- input输入框的的input事件和change事件以及change和blur事件的区别
input输入框的 oninput事件 ,在用户输入的时候触发,只要元素值发生变化就会触发 input输入框的 onchange事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...
随机推荐
- error: You must be logged in to the server (Unauthorized) 问题处理
故障现象: 执行kubectl 命令时: 提示"error: You must be logged in to the server (Unauthorized)" 分析: 权限问 ...
- k8s利用endpoints和service访问外部服务
一.原理解析 在k8s集群中我们通过创建service去访问对应pod内的服务,而在创建service的时候会同时创建一个与service同名的endpoints对象,endpoints与pod实际建 ...
- 记一次线上DB被打挂
这周刚新上了需求,在慢慢写代码的时候,突然报警群的消息多了,组长让我看看咋回事. 一开始没当回事,因为faas任务的错误日志一直很多,但是发现新的日志和以前大不相同,显示的是上游faas实例的连接被m ...
- jq的用法
选择页面中的元素,得到jQuery实例对象 ID选择器$("#save") 类选择器$(".class") 标签选择器$("div") 复合 ...
- openvas在centos中扫描单项的python实现
使用gvm_cli命令来实现 先创建一个空的配置 copy_id = '085569ce-73ed-11df-83c3-002264764cea' new_config = ''' <creat ...
- C++ Primer 15.9文本查找程序
可以通过查询语句的组合进行检索,VS2015. main函数,读取存有数据的文件,进行检索.提供两种入口.查词,与按照表达式查询. 1 #include <iostream> 2 #inc ...
- windows消息机制_PostMessage和SendMessage
1.子线程中建立一个窗口 为了在后面比较这两个函数,先使用win32 windows程序中建立子线程,在子线程中建立一个窗口. (1)新建一个 win32 windows应用程序 (2)定义子窗口的窗 ...
- ASP.NET WEBAPI oken验证
看了下网上关于.net webAPI 的案例全是坑 验证成功了不被微信服务器接收 微信客服有找不到,提问也没人回 自己测试好几个小时 终于发现返回结果只要个string 双引号都不用加 public ...
- ABP vNext微服务架构详细教程——简介
概述 该系列文章主要展示ABP vNext框架在微服务架构下的用法,提供一套可落地的技术实现思路,并演示各服务在Kubernetes下的部署方案. 基础概念 ABP vNext:基于ASP.NET C ...
- mysql使用support-files下的mysql.server启动报错“Starting MySQL ERROR! Couldn't find MySQL server (/usr/local/mysql/bin/mysqld_safe)”
报错版本:mysql-5.7.35 1.报错完整提示信息: [root@localhost support-files]# ./mysql.server start ./mysql.server: l ...