Vue3 表單輸入綁定的操作方法

更新時間：2025年10月19日 13:32:02 作者：Sheldon一蓑煙雨任平生

本文給大家介紹Vue3 表單輸入綁定的相關(guān)操作,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1. 基本用法（v-model 語法糖）

在前端處理表單時，我們常常需要將表單輸入框的內(nèi)容同步給 JavaScript 中相應(yīng)的變量。手動連接值綁定和更改事件監(jiān)聽器可能會很麻煩。比如：

<template>
  <input
  :value="text"
  @input="event => handleInput(event.target.value)">
</template>
<script setup>
import { ref } from 'vue';
let text = ref('')
function handleInput(newText) {
  text.value = newText;
  console.log('text:', text.value); // 用于測試數(shù)據(jù)是否發(fā)生了改變
}
</script>
<style scoped>
</style>

1.1 input 文本框

因為 Vue 中會大量使用到雙向數(shù)據(jù)綁定，因此使用了 v-model 語法糖，為我們簡化了這一過程：

<input v-model="text">

<template>
  <input v-model="text" @input="changeInput">
</template>
<script setup>
import { ref } from 'vue';
let text = ref('')
// 不手動修改，只是監(jiān)聽文本框的值變化
function changeInput() {
  console.log('text的值發(fā)生了改變', text.value);
}
</script>
<style scoped>
</style>

v-model 還可以用于各種不同類型的輸入，<textarea>、<select> 元素。它會根據(jù)所使用的元素自動使用對應(yīng)的 DOM 屬性和事件組合：

文本類型的 <input> 和 <textarea> 元素會綁定 value property 并偵聽 input 事件；
<input type="checkbox"> 和 <input type="radio"> 會綁定 checked property 并偵聽 change 事件；
<select> 會綁定 value property 并偵聽 change 事件。

1.2 textarea 多行文本

<template>
  <textarea cols="30" rows="10" v-model="textContent"></textarea>
  <p>你當(dāng)前輸入的內(nèi)容為：{{ textContent }}</p>
</template>
<script setup>
import { ref } from 'vue'
const textContent = ref('')
</script>
<style scoped></style>

1.3 checkbox 復(fù)選框

1.3.1 單一復(fù)選框

1.3.1.1 基本使用方式

單一的復(fù)選框，綁定布爾類型值：

<template>
  <div>
    <input type="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const checked = ref(true)
</script>
<style scoped></style>

點擊復(fù)選框，進(jìn)行切換

1.3.1.2 真假值自定義

1.3.1.1 的例子中，復(fù)選框默認(rèn)真假值為布爾值 true 和 false，但是這其實可以進(jìn)行自定義：

<template>
  <div>
    <input
      type="checkbox"
      v-model="checked"
      :true-value="1"
      :false-value="0" />
    <!-- 這里的label通常為固定文本，修改為checked只是為了展示數(shù)據(jù)變化 -->
    <label for="checkbox">{{ checked }}</label>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const checked = ref(1)
</script>
<style scoped></style>

1.3.2 多個復(fù)選框

對于多個復(fù)選框，我們通常將其多個選項綁定在一個數(shù)組或者集合中，方便遍歷展示：

<template>
  <div v-for="(item, index) in arr" :key="index">
    <label for="item.id">{{ item.title }}</label>
    <input type="checkbox" v-model="hobby" :id="item.id" :value="item.value" />
  </div>
  <p>{{ message }}</p>
</template>
<script setup>
import { ref, computed } from 'vue'
const hobby = ref([])
const arr = ref([
  { id: 'swim', title: '游泳', value: '游個泳' },
  { id: 'run', title: '跑步', value: '跑個步' },
  { id: 'game', title: '游戲', value: '玩?zhèn)€游戲' },
  { id: 'music', title: '音樂', value: '聽個音樂' },
  { id: 'movie', title: '電影', value: '看個電影' }
])
const message = computed(() => {
  // 根據(jù) hobby 的值進(jìn)行二次計算
  if (hobby.value.length === 0) return '請選擇愛好'
  else return `您選擇了${hobby.value.join('、')}`
})
</script>
<style scoped></style>

1.4 radio 單選框

<template>
  <input type="radio" id="male" v-model="gender" value="male" />
  <label for="male">男</label>
  <input type="radio" id="female" v-model="gender" value="female" />
  <label for="female">女</label>
</template>
<script setup>
import { ref } from 'vue'
const gender = ref('male')
</script>
<style scoped></style>

1.5 select 選擇器（多選時需要按住ctrl鍵）

<template>
  <!-- 下拉列表列表是單選的話，v-model 綁定的值是一個字符串，這個字符串是 option 的 value 值 -->
  <select v-model="hometown1">
    <option value="" disabled>請選擇</option>
    <option v-for="(item, index) in hometownList" :key="index" :value="item.value">
      {{ item.label }}
    </option>
  </select>
  <p>您選擇的家鄉(xiāng)為：{{ hometown1 }}</p>
  <!-- 如果下拉列表是多選的話，v-model 綁定的值是一個數(shù)組，這個數(shù)組是 option 的 value 值組成的數(shù)組 -->
  <select v-model="hobbies" multiple>
    <option label="" disabled>請選擇</option>
    <option v-for="(item, index) in hobbyList" :key="index" :value="item.value">
      {{ item.label }}
    </option>
  </select>
  <p>按住 Ctrl (windows) / Command (Mac) 按鈕來選擇多個選項。</p>
  <p>您選擇的興趣為：{{ hobbies }}</p>
</template>
<script setup>
import { ref } from 'vue'
const hometown1 = ref('')
const hobbies = ref([])
const hometownList = ref([
  { value: '成都', label: '四川' },
  { value: '帝都', label: '北京' },
  { value: '魔都', label: '上海' },
  { value: '妖都', label: '廣州' },
  { value: '陪都', label: '重慶' }
])
const hobbyList = ref([
  { value: 'basketball', label: '籃球' },
  { value: 'football', label: '橄欖球' },
  { value: 'soccer', label: '足球' },
  { value: 'baseball', label: '排球' },
])
</script>
<style scoped></style>

2. 表單修飾符

2.1 課外拓展（input 和 change 事件的區(qū)別）

2.1.1 觸發(fā)時機(jī)

input事件‌：用戶每次輸入（包括鍵盤輸入、粘貼、語音輸入等）或通過腳本修改值時實時觸發(fā)。
change事件‌：元素失去焦點且內(nèi)容發(fā)生變化時觸發(fā)（如點擊其他區(qū)域、選擇下拉框等），不會因輸入過程中頻繁觸發(fā)。 ‌

2.1.2 適用場景

input事件‌：適合需要實時反饋的場景，如搜索聯(lián)想、密碼強(qiáng)度檢測、字?jǐn)?shù)統(tǒng)計等。
change事件‌：通常用于表單提交前的最終驗證，或需要離開輸入框后才能確認(rèn)數(shù)據(jù)有效性的場景。

2.2 表單修飾符的使用

.lazy：默認(rèn)情況下，v-model 會在每次 input 事件觸發(fā)時就更新數(shù)據(jù)，lazy 修飾符可以改為 change 事件觸發(fā)后才更新數(shù)據(jù)；
.number：將用戶輸入的內(nèi)容從字符串轉(zhuǎn)為 number 類型；
.trim：默認(rèn)自動去除用戶輸入內(nèi)容中兩端的空格。

<template>
  <!-- lazy修飾符演示 -->
  <input type="text" v-model.lazy="mess1" />
  <p>你輸入的是：{{ mess1 }}</p>
  <p>類型為{{ typeof mess1 }}</p>
  <p>長度為{{ mess1.length }}</p>
  <!-- number修飾符演示 -->
  <input type="text" v-model.number="mess2" />
  <p>你輸入的是：{{ mess2 }}</p>
  <p>類型為{{ typeof mess2 }}</p>
  <p>長度為{{ mess2.length }}</p>
  <!-- trim修飾符演示 -->
  <input type="text" v-model.trim="mess3" />
  <p>你輸入的是：{{ mess3 }}</p>
  <p>類型為{{ typeof mess3 }}</p>
  <p>長度為{{ mess3.length }}</p>
</template>
<script setup>
import { ref } from 'vue'
const mess1 = ref('')
const mess2 = ref('')
const mess3 = ref('')
</script>
<style scoped></style>

到此這篇關(guān)于Vue3 表單輸入綁定的文章就介紹到這了,更多相關(guān)vue表單輸入綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: