Vue Input 失去焦点 @blur事件 & 获得焦点 ref 实时 实时获取input输入值
失去焦点
demo 1 关键 @blur <input v-model="testVal" @blur="test"></Input> methods: { test(){ console.log('testVal------------- ',testVal) } } 第二种 关键 @blur.native.capture <input v-model="testVal" @blur.native.capture="test"></Input> methods: { test(){ console.log('testVal------------- ',testVal) } }
获取焦点
demo 1 关键 ref 可用于按钮点击事件连用 <input v-model="testVal" ref="inputVal"></Input> mounted () { this.$refs.inputVal.focus(); }
@input 监听输入框
输入框只要输入的值变化了就会触发 input 调用 search 数据实时获取通过 event.currentTarget.value 获取到
<template> <div class="class"> <div> <input type="text" @keyup.enter="search" @input="search($event)"/> </div> </div> </template> <script> export default { name: "search", data() { }, methods: { search(event){ console.log(event.currentTarget.value) } } } </script>
ref 获取数据
这种方式类似于原生DOM,但是ref获取数据更方便
<template> <div class="class"> <input type="text" ref="getValue" /> <button @click="subbmitButton">获取表单数据</button> </div> </template> <script> export default { name: "page", data() { }, methods: { subbmitButton(){ console.log(this.$refs.getValue.value) } } } </script>