快捷導(dǎo)航

Vue獲取input值的四種常用方法

更新時(shí)間：2023年09月17日 10:00:45 作者：凡大來(lái)啦

Vue是一種流行的Web開(kāi)發(fā)框架,它提供了一個(gè)雙向綁定的語(yǔ)法糖。在Vue中,我們可以很容易地獲取頁(yè)面上的數(shù)據(jù),并且可以實(shí)時(shí)的響應(yīng)其變化,這篇文章主要給大家介紹了關(guān)于Vue獲取input值的四種常用方法,需要的朋友可以參考下

1. v-model 表單輸入綁定

//使用v-model創(chuàng)建雙向數(shù)據(jù)綁定, 用來(lái)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理	
<template>
    <div>
	    <input class="login-input" type="text"  v-model="username" placeholder="請(qǐng)輸入賬號(hào)">
	    <input class="login-input" type="password" v-model="password" placeholder="請(qǐng)輸入密碼">
		<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 監(jiān)聽(tīng)輸入框

//輸入框只要輸入的值變化了就會(huì)觸發(fā) input 調(diào)用 search	
<template>
	<div class="class">
		<div>
			<input type="text" @input="search"/>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Search",
		data() {
		},
		methods: {
			search(event){
				console.log( event.currentTarget.value )
			}
		}
	}
</script>

3. @change 監(jiān)聽(tīng)輸入框

//輸入框失去焦點(diǎn)時(shí)，輸入的值發(fā)生了變化，就會(huì)觸發(fā) change 事件
<template>
	<div class="class">
		<div>
			<input type="text" @change="search"/>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Search",
		data() {
		},
		methods: {
			search(event){
				console.log( event.target.value )
			}
		}
	}
</script>

4. ref 獲取數(shù)據(jù)

//這種方式類似于原生DOM,但是ref獲取數(shù)據(jù)更方便
<template>
	<div class="class">
		<input type="text" ref="inputDom" />
		<button @click="subbmitButton">獲取表單數(shù)據(jù)</button>
	</div>
</template>
<script>
    export default {
		name: "Page",
		data() {
		},
		methods: {
			subbmitButton(){
				console.log( this.$refs.inputDom.value )
			}
		}
	}
</script>

附：vue如何判斷輸入框是否有值

在Vue中判斷輸入框是否有值的方法有多種。以下是其中兩種常用的方法：

綁定v-model指令：將輸入框的值綁定到Vue實(shí)例的數(shù)據(jù)屬性上，然后通過(guò)判斷該數(shù)據(jù)屬性的值來(lái)判斷輸入框是否有值。例如：

<template>
  <input type="text" v-model="inputValue" />
  <button @click="checkInput">檢查輸入框是否有值</button>
</template>
<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    checkInput() {
      if (this.inputValue) {
        console.log('輸入框有值')
      } else {
        console.log('輸入框?yàn)榭?)
      }
    }
  }
}
</script>

使用ref引用：給輸入框添加一個(gè)ref屬性，然后通過(guò)$refs來(lái)獲取輸入框元素的引用，再通過(guò)判斷輸入框元素的value屬性來(lái)判斷輸入框是否有值。例如：

<template>
  <input type="text" ref="myInput" />
  <button @click="checkInput">檢查輸入框是否有值</button>
</template>
<script>
export default {
  methods: {
    checkInput() {
      if (this.$refs.myInput.value) {
        console.log('輸入框有值')
      } else {
        console.log('輸入框?yàn)榭?)
      }
    }
  }
}
</script>