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事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...
随机推荐
- js 导出json文件
var data={}//处理得到的json字符串 var filename = 'json.json'//json文件名 if(typeof data === 'object'){ ddd = JS ...
- CentOS 7 部署Memcached服务器——超级详细
操作系统:CentOS 7.x 64位实现目的:安装部署Memcached服务器 一.防火墙设置CentOS 7.x默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭f ...
- GPS时钟之户外防水防雷细节
GPS时钟之户外防水防雷细节------专业LED时钟厂家![点击进入] GPS的脆弱性: 由于在GPS设计时,干扰环境下的工作能力不是优先考虑的因素,它只是作为一种导航的辅助工具,而不是用于精确制导 ...
- js- throw
// Create an object type UserExceptionfunction UserException (message){ this.message=message; this.n ...
- 解决WIN7下pl/sql连接弹出空白提示框问题
问题描述: win7 32位系统,已安装oracle10.0开发客户端,已配置数据库, 登陆pl/sql时出现空白提示框问题,尝试重装oracle无果,于是上网查找解决方法,逐步尝试,终于把客户端弄好 ...
- 什么是js柯里化（curry）？
在数学和计算机科学中,柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术. 举例来说,一个接收3个参数的普通函数,在进行柯里化后,柯里化版本的函数接收一个参数并返回接收下一个参数 ...
- 小程序使用svga
svga 是一种动画格式.不仅可以在 ios,android,flutter,web 上使用,小程序也支持.设计师使用 after effects 或是 animate 进行动画设计.设计师导出工具 ...
- vue3 vue-i18n 入口文件配置报警
报警: You are running the esm-bundler build of vue-i18n. It is recommended to conf 解决: 在vue.config.js文 ...
- fetch请求方式
Fetch请求的方式 1:GET 请求 // 未传参数 const getData = async () => { const res = await fetch('http://www.xxx ...
- Unity图片转存及读取
[code]csharpcode: /// <summary> /// 加载图片 /// </summary> private Sprite LoadTexture(strin ...