@focus @input @click 事件区别-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

@focus @input @click 事件区别

[导读]:作用1.vue 获取 input 获取焦点事件 @focus获取input 焦点事件 (失去焦点,再次获取焦点时触发)<el-input@focus='getFocus'></el-input>getFocus(){},2.@input 用于监听事件 只要输入的值变化了就会触发input<el-input@input='atInput'></el-inp...

作用

1.vue 获取 input 获取焦点事件 @focus

获取input 焦点事件 (失去焦点,再次获取焦点时触发)

<el-input @focus='getFocus'> </el-input>
getFocus() {
},

2.@input 用于监听事件 只要输入的值变化了就会触发input

<el-input @input='atInput'> </el-input>

3. @click 点击事件 点击触发

change用户确认选定的值时触发
blur当 input 失去焦点时触发
focus

当 input 获得焦点时触发

input 用于监听事件 只要输入的值变化了就会触发input

图片

image.png

源码

  <el-time-picker
   v-model="autoTime"
   format="HH:mm"
   value-format="HH:mm"
   :picker-options="{
    selectableRange: '00:00:00 - 23:59:00'
   }"
   placeholder="选择时间"
   @change="changeAutoConfig"
   @blue="changeAutoConfig"
   @focus="changeAutoConfig">
  </el-time-picker>
<template>
  <div>
    <!-- @blur 当元素失去焦点时触发blur事件-->
    <div>
      <input type="text" placeholder="请输入内容" @blur="blur" @change="change" @focus="focus" @input="input"/>
    </div>
 
  </div>
</template>
 
<script>
    export default {
      methods:{
        blur(){
          console.log("blur事件被执行了")
        },
        change(){
              console.log("change事件被执行了")
            },
            focus(){
              console.log("focus事件被执行了")
            },
            input(){
              console.log("input事件被执行了")
            },
      }
    }
</script>



本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ