Vue中的@blur事件 当元素失去焦点时所触发的事件问题

目录
  • Vue @blur事件 当元素失去焦点时所触发的事件
    • @blur 是什么？
    • @blur 怎么使用？
  • Vue 使用@blur无效

Vue @blur事件 当元素失去焦点时所触发的事件

@blur 是什么？

@blur 是当元素失去焦点时所触发的事件

@blur 怎么使用？

<template>
  <div>
    <input type="text" placeholder="请输入内容" @blur="blur"/>
  </div>
</template>
<script>
    export default {
      name: "@blur_61",
      methods:{
        blur(){
          console.log("blur事件被执行了")
        }
      }
    }
</script>

<style scoped>

</style>

Vue 使用@blur无效

@blur=“checkUserShortName”    

这样写不起作用

@blur.native.capture=“checkUserShortName”  

这样可以正常触发

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中mintui的field实现blur和focus事件的方法

    首先上代码说总结: <mt-field label="卡号" v-model="card.cardNo" @blur.native.capture="checkCard"></mt-field> methods: { checkCard() { console.log('1111'); } } 使用@blur.native.capture=""即可实现. 另一种方法: 使用vue-directive指令

  • 详解Vue 动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的知识点,然后发现问题解决问题,我们的能力才能得以提升,要不然就有点眼高手低了. 基于这个想法于是就开始自己去撸了一个旅游网站,旅游网站嘛避免不了城市的选择,所以在实现城市选择列表的时候碰到的一些问题,以及解决办法今天就记录下来做一个总结. 城市列表选择组件 首先说说我们要实现一个什么样的城市选择组

  • Vue v-for中的 input 或 select的值发生改变时触发事件操作

    oninput 用法 <input type="text" id="myInput" oninput="myFunction()"> <script> function myFunction() { } </script> oninput 如果需要在Vue中使用则需要写成 v-on:input 还有绑定id的时候这样写:id="'m_num'+index" 注意m_num必须用单引号引起来

  • Vue中的@blur事件 当元素失去焦点时所触发的事件问题

    目录 Vue @blur事件 当元素失去焦点时所触发的事件 @blur 是什么? @blur 怎么使用? Vue 使用@blur无效 Vue @blur事件 当元素失去焦点时所触发的事件 @blur 是什么? @blur 是当元素失去焦点时所触发的事件 @blur 怎么使用? <template> <div> <input type="text" placeholder="请输入内容" @blur="blur"/&g

  • Vue中通过属性绑定为元素绑定style行内样式的实例代码

    1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h

  • VUE中V-IF条件判断改变元素的样式操作

    方法一 v-if判断后用标签改变样式(特定显示列字体加粗) <v-list dense> <template v-for="(col,i) in cols"> <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'"> <v-list-item-content><b>{{col.text}}</b></

  • vue中使用@blur获取input val值

    目录 使用@blur获取input val值 vue表单input 框使用@blur事件 使用@blur获取input val值 @blur="validScore($event)" validScore(event){ alert(event.target.value) } vue表单input 框使用@blur事件 input 框失去焦点 ,便会触发定义的方法 form表单代码 <el-form-item label="身份证号码:" prop="

  • 基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&

  • JavaScript事件类型中焦点、鼠标和滚轮事件详解

    本文针对JavaScript 事件中"事件类型"下"焦点.鼠标和滚轮事件"的注意要点进行整理,分享给大家供大家参考,具体内容如下 一.焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin: DOMFocusOut:同HTML事件blur,于DOM3遭废弃,选用foc

  • Vue中的无限加载vue-infinite-loading的方法

    本文介绍了Vue中的无限加载vue-infinite-loading的方法,分享给大家,具体如下: 注意:vue-infinite-loading2.0只能在Vue.js2.0中使用.如果你想在Vue.js1.0中使用,请安装vue-infinite-loading1.3版本 如何安装 npm install vue-infinite-loading --save 导入方式 es6模块导入方式 import InfiniteLoading from 'vue-infinite-loading';

  • 深入浅析Vue 中 ref 的使用

    深入浅析Vue 中 ref 的使用

    官网上的说明 一.前言# 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作.但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据.难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue

  • Vue中消息横向滚动时setInterval清不掉的问题及解决方法

    最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,结果滚动的速度越来越快.这里记录一下来提醒自己.消息滚动的代码在最下面,方便下次使用. 问题背景: 最近在做一个需求,组件A获取消息采用的是轮询,组件A获取到新的消息后,将组件A中的消息传递给另外一个组件B,当组件B接收到消息时就让消息在页面上滚动播放. 实现思路: 这个项目应用的框架为VUE,当组件A获取到新的消息之后,就触发中央事件总线,在组件B中进行事件监听,将其添加进入一个数组,当判断定

  • vue中使用v-for时为什么不能用index作为key

    结论: 更新DOM的时候会出现性能问题 会发生一些状态bug React 中的 key 也是如此 如果已经了解 为什么要用key,可以通过目录直接跳到下一节. 为什么要用key? Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 同一

随机推荐