VueInput失去焦点@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" @="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.$Value.value)
input绑定onblur事件}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。