事件简介

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输入框的几个事件的更多相关文章

  1. vue中input输入框的模糊查询实现

    最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...

  2. input输入框change和blur事件区别

    blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外. 1.没有进行任何输入时,不会触发change 在这种情况下失焦后, ...

  3. vue实现input输入框的模糊查询

     最近在用uni-app做一个项目,使用的框架还是vue,想了好久才做出来 . HTML代码部分 <input type="text" focus class="s ...

  4. input 输入框两种改变事件的方式

    一.在输入框内容变化的时候不会触发,当鼠标在其他地方点一下才会触发 $('input[name=myInput]').change(function() { ... }); 二.在输入框内容变化的时候 ...

  5. Vue触发input选取文件点击事件

    CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display ...

  6. oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测

    这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...

  7. vue input输入框关键字筛选检索列表数据展示

    想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo ...

  8. input输入框file类型第二次不触发onchange事件的解决办法，简单有效

    在网上看了很多办法,现在将网上大部分说法总结如下: 网上说法: 原因:选择一次后onchange事件没有绑定到input标签上:    解决办法:拷贝一份input标签的副本,每次选择后对原input ...

  9. input输入框的的input事件和change事件以及change和blur事件的区别

    input输入框的 oninput事件 ,在用户输入的时候触发,只要元素值发生变化就会触发 input输入框的 onchange事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...

随机推荐

  1. Python模块——os模块详解

  2. APPscan设置自动扫描时间

    一.设置位置 1.在设置自动扫描时间之前,我们要先创建扫描配置,然后再启动设置面板.2.启动AppScan,单击展开软件顶部菜单栏[工具]按钮,单击下拉菜单内[扫描调度程序],便可启动自动扫描的设置面 ...

  3. goland 快捷键

    goland常用快捷键 Coldestmonth 2018-07-17 17:26:37 18067 收藏 14版权Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/-/ )Ctrl+D ...

  4. 题解，洛谷P3435

    根据题意,分析如右图 显然,对于每个前缀,有这样的性质A==B==C,所以,周期最长则a最短,即求该字符串的最短公共前后缀.通过kmp算法中nex数组的迭代,很容易求得最短前后缀. for(int i ...

  5. IT工具知识-08：如何使用Openwrt下的SMB服务（第一次使用时）？

    0.背景知识 使用固件:Lean的R20.5.9由flippy打包 需要软件:ssh客户端(我用的xshell),浏览器(最好是chrome内核) 1.使用教程 1.1 注释掉SAMBA模板中的某条指 ...

  6. vue.js拓展无法启用

    vue.js拓展无法启用 这里我以自己的谷歌浏览器演示 C:\Users\维磊\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhd ...

  7. 【Linux】虚拟机CentOS 7 磁盘扩容

    [Linux]虚拟机CentOS 7 磁盘扩容 在有些时候,自己或者公司开的虚拟机的磁盘在一开始的时候没规划好,或者有磁盘扩容的需求(其实在系统日常运维的时候这个需求时常出现),那么这个时候又该怎么处 ...

  8. C/C++ 数据结构顺序栈的基本操作实现

    #include <iostream> #include <Windows.h> using namespace std; #define MAXSIZE 6 //顺序栈的实现 ...

  9. Apache + PHP + Mysql Windows下配置

    1.安装Apache 下载网址 http://httpd.apache.org/download.cgi#apache24 二.下载php 下载地址:https://www.php.net/downl ...

  10. 2020.11.14 typeScript声明空间

    在ts中存在两种声明空间: 类型声明空间和变量声明空间. 类型声明空间: 1. class People {} 2. interface People {} 3. type People = {} 变 ...