Vue Input 失去焦點 @blur事件 & 獲得焦點 ref 實時 實時獲取input輸入值
阿新 • • 發佈:2020-12-09
失去焦點
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> exportdefault { 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> exportdefault { name: "page", data() { }, methods: { subbmitButton(){ console.log(this.$refs.getValue.value) } } } </script>