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事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...
随机推荐
- Flutter showModalBottomSheet 自适应高度
showModalBottomSheet( context: context, shape: const RoundedRectangleBorder( borderRadius: BorderRad ...
- tp 获取器的使用中应该怎么append 自定义数据
$data = model('organization_area')->getListByNoPage($where, 'create_time asc');foreach ($data as ...
- nrm ls报错及npm镜像站点测速、切换
报错截图: 解决方法: 1.win键,搜索powershell,点击"以管理员身份运行" 2.粘贴下面命令,回车,敲y,回车 set-ExecutionPolicy RemoteS ...
- python安装install
pip3 install pyinstaller -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.comp ...
- 结对作业——考研咨询APP
结对作业--考研资讯系统 102陈同学105潘同学108苏同学 (排版:Markdown) 一.需求分析(NABCD模型) 1. N(Need 需求): 1)想知道每个专业考研可以考哪个专业2)想 ...
- layui.dtree的学习，自定义扩展toolbar按钮（toolbarExt）
学习layui.dtree请前往 http://www.wisdomelon.com/DTreeHelper/ 记录一下dtree的自定义扩展toolbar按钮(toolbarExt) html代码: ...
- jsp第10个作业
package Servlet; import JDBC.JDBC; import javax.servlet.ServletException; import javax.servlet.annot ...
- api接口文档生成，无需其他配置一键生成基于文本注释
<dependency> <groupId>io.github.yedaxia</groupId> <artifactId>japidocs</a ...
- MySQL数据库sql_mode导致varchar字段超过长度被截断插入
django数据库设置sql_mode MySQL的sql_mode解析与设置 mysql中sql_mode的修改 sql_mode:它定义了MySQL应该支持的sql语法,对数据的校验等等. 问题 ...
- Mybatis二级缓存问题
一.缓存介绍. Mybatis提供了缓存服务,以减缓数据库压力: Mybatis的查询缓存总共有两级,我们称之为一级缓存和二级缓存,如图: 1.一级缓存是SqlSession级别的缓存.在操作数据 ...