【vue】三種獲取input值的寫法

一、v-model 表單輸入綁定

使用v-model創建雙向數據綁定, 用來監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

<template>
  <div>
  <input class="login-input" type="text"  v-model="username" placeholder="請輸入賬號">
  <input class="login-input" type="password" v-model="password" placeholder="請輸入密碼">
  <div class="login-button" @click="login" type="submit">登陸</div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
  return {
    username: '',
    password: ''
    }
  },
  methods: {
    login() {
      console.log(this.username)
      console.log(this.password)
    }
  }
}
<script/>

二、@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>