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>