vue三種常用獲取input值寫法(轉)

1. 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/>

2. @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>

3. 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>