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事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...
随机推荐
- SQL IIF函数的使用 判断为空数据不显示的问题
先说说IIF函数 IIF函数 需要一个条件 两个值 当条件满足的时候 执行第一个值 条件不满足的时候 执行第二个值 IIF(判断条件,值1,值2) 今天判断数据的时候 发现当值为NULL或者为' ...
- Alibaba Cloud Linux 3.2104 64位安装php7.2.12
1 安装php所需要的扩展 yum -y install libxml2 libxml2-devel openssl openssl-devel bzip2 bzip2-devel curl curl ...
- 记一次线上DB被打挂
这周刚新上了需求,在慢慢写代码的时候,突然报警群的消息多了,组长让我看看咋回事. 一开始没当回事,因为faas任务的错误日志一直很多,但是发现新的日志和以前大不相同,显示的是上游faas实例的连接被m ...
- mysql授权、导入等基本操作
1.授权: mysqladmin -uroot password rootpwd mysql -uroot -prootpwd mysql -e "INSERT INTO user (Hos ...
- C# NAudio 检测声音
using NAudio.Wave;using System;using System.Collections.Generic; namespace WinFromBaidu{ class NAudi ...
- 弹框tabel
<el-dialog title="删除数据类型" :visible.sync="isDataType" width="60%" :b ...
- http请求的方法
1.OPTIONS 返回服务器针对特定资源所支持的HTTP请求方法,也可以利用向web服务器发送'*'的请求来测试服务器的功能性. 2.HEAD 向服务器索要与GET请求相一致的相应,只不过响应体将不 ...
- 估计人数【最小路径重复点覆盖】【直接在（i，j）建一个新点】
估计人数 题意 思路 用最少的人,走完这几条线.最小重复路径点覆盖问题 建图之后,跑一下二分图. 考虑建图:图中'1'连着完下.或者右走.我们把图中所有的1编号,然后建图,然后floly,然后匈牙利. ...
- 2.20 Q_Learning 和Sarsa 的区别
二者都是基于Qtable的算法,其中Qlearning属于off-policy,Sarsa属于on-policy. 算法伪代码: 二者主要区别是更新Qtable的方式不同:
- 解决IDEA输出中文乱码问题
问题描述(中国人加油,真痛苦) 无法正确输出中文字符:(请正确分辨自己是哪一种乱码问题!) 解决方法 1.最容易想到 File -> Settings -> File Encodings下 ...