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="idNumber">
       <el-input  @blur="onBsp($event)" v-model="laApplicationDetail.idNumber" placeholder="身份证号码"  maxlength="18" show-word-limit
                            style="width: 240px;" ></el-input >
  </el-form-item>

methods方法,下面附代码

methods方法代码

onBsp(event) {
        let queryParam = {
          name:event.target.form[0].value,
          idcard: event.target.value
        }
        getinformation(queryParam).then(res => {
          let list = res.data;
          this.laApplicationDetail.migrantworker = list.migrantworker;
          this.laApplicationDetail.phone = list.phone;
        }).catch(error => {
          this.$message({
            message: error.response.data.message ? error.response.data.message : '网络异常',
            type: 'warning'
          })
        });
      },

上图的 方法的 queryParam参数怎么获取的

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

赞 (0)

相关推荐

  • vue环境如何实现div focus blur焦点事件

    目录 vue div focus blur焦点事件 vue div 获得焦点和失去焦点 vue div focus blur焦点事件 onfocus获取焦点事件与onblur失去焦点事件本身是input类用的 input类如果是点击后才加载的话需要做个延时器,否则会报错 setTimeout(()=>{     this.$refs.aside.focus() },100) div想支持则需要加上tabindex="0"属性//0或者以上 但是在vue环境中,加上这个也不支持,而

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

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

  • vue 表单输入框不支持focus及blur事件的解决方案

    采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例): 1.html引用: v-mtfocus 2.在实例中添加指令 directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () { ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映

  • 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中使用@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中的循环及修改差值表达式的方法

    一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 <div v-for="(item, index) in items"></div> #第三种 <div v-for="(val, key) in object"></div> #第四种 <div v-for="(val, n

  • 在Java代码中解析html,获取其中的值方法

    有时我们获取到了页面需要在Java代码中进行解析,获取html中的数据,Jsoup是一个很方便的工具. 一.什么是Jsoup? 官网网站:http://jsoup.org/ 可在官网下载对应的jar 通俗的将Jsoup就是一个解析网页的东西 二.示例 1.页面,通过查询获取到了一些数据: 2.源码,这是一个table,class="list",通过这些来唯一标识它 3.代码,将html以String的形式传进来,使用Jsoup进行解析: import org.jsoup.Jsoup;

  • vue中设置、获取、删除cookie的方法

    1.在src目录下的access下新建一个cookie.js, 内容如下: export function setCookie(c_name,value,expire) { var date=new Date() date.setSeconds(date.getSeconds()+expire) document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString() //console.lo

  • vue中的 $slot 获取插槽的节点实例

    vue 中的 $slot 以前一直不知到这个东西,后来发现 vue api 中 藏着很多的 很神奇的 api,比如这个 具名插槽很好理解,但是那个 default 就有点难了, 写了一个炒鸡简单的 demo father: <template> <div> <button @click="getSlot">getSlot</button> <try ref="try"> <div class=&quo

  • 在vue中使用vuex,修改state的值示例

    1. 安装 vuex npm install vuex -S 2.在目录下创建store文件 3. 在store.js编辑一个修改state的方法 然后在mian.js中全局引入 最后在组件中使用 这个的功能是运用mutations 修改state中的值 以上这篇在vue中使用vuex,修改state的值示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在vue中给后台接口传的值为数组的格式代码

    比如你要传的数组是在data中的return中的params中的Arrays.传值格式需要如下: {flag: 1, data: this.params.Arrays} 如果要求是json格式,记得后面要加 {headers:{'Content-Type': 'application/json'}} 补充知识:vue项目之前后台联调之以数组作为参数传给服务端 一.要求 由于项目特殊要求,上传到知识库的文件,再点击保存按钮,保存至项目数据库. 由于上传多个文件,保存操作后台要求前端用数组作为参数传

  • 简单了解vue中父子组件如何相互传递值（基础向）

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例--用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) 这里以root为挂载点,root里包含的所有内容可称为模板,即我们常说的父组件 子组件:用Vue.component()注册的组件(下图todo-item就是组件的名称,该名称可自定义,推荐使用短横线分隔命名) 定义组件名的2种方式(截图截自vue官网) 注:建议在html中引用组件时(非字符串模板),

  • Python中按键来获取指定的值

    Python中按键来获取值,相对来说要容易些,毕竟只需要dict[key]就可以找到,但里面同样有个问题,如果其中的键不存在的话,会抛出异常,如果不用try...except...等异常处理机制的话,程序就会中断!这里提供两种很安全,很健壮的处理方法. 方式一: dict[key] + 判断 >>> dct = {'Name': 'Alice', 'Age': 18, 'uid': 1001, 'id': 1001} >>> def get_value1(dct, ke

  • vue中的select绑定多个值

    目录 vue select绑定多个值 vue el-select 绑定id值 vue select绑定多个值 不再通过v-model和value进行绑定 而是通过绑定索引值Index 然后通过定义@input=change方法,通过索引值获取并更新想要绑定的多个值 <el-select v-model="basic_info.itemindex" placeholder=""  @input="change">     <el-

随机推荐