Vue中怎么控制表單輸入

這篇文章主要介紹“Vue中怎么控制表單輸入”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue中怎么控制表單輸入”文章能幫助大家解決問題。

Vue中v-model的思路很簡(jiǎn)單。定義一個(gè)可響應(yīng)式的text（通常是一個(gè)ref），然后用v-model="text"將這個(gè)值綁定到一個(gè)input上。這就創(chuàng)造了一個(gè)雙向的數(shù)據(jù)流：

用戶在輸入框中輸入，text會(huì)發(fā)生變化。 text發(fā)生變化，輸入框的值也隨之變化。

綁定表單輸入

讓我們實(shí)現(xiàn)一個(gè)組件，渲染一個(gè)初始值為Unknown的輸入表單。用戶在輸入表單中引入的值會(huì)在屏幕上渲染出來。

v-model很適合實(shí)現(xiàn)這樣一個(gè)組件。將v-model與輸入表單連接起來需要兩個(gè)簡(jiǎn)單的步驟：

const text = ref()：作為v-model可響應(yīng)式的值。 v-model="text"：將v-model添加到分配有text的輸入表單標(biāo)簽中。

<script setup>
import { ref } from 'vue'
const text = ref('Unknown') // Step 1: create data bus
</script>
<template>
  <!-- Step 2: assign data bus to v-model -->
  <input v-model="text" type="input" />
  <div>{{ text }}</div>
</template>

輸入表單包含初始值Unknown。在輸入表單里輸入一些東西：輸入值和屏幕上的文本都會(huì)更新。

v-model="text" 在Vue中屬于雙向綁定數(shù)據(jù)。

第一個(gè)方向的流動(dòng)發(fā)生在初始化過程中。輸入值被初始化為Unknown，也就是text的初始值。

第二個(gè)方向的流動(dòng)發(fā)生在給輸入表單鍵入值的時(shí)候。v-model接受輸入框的值，并用它來更新text。

v-model與v-bind

在Vue中，v-bind是另一種數(shù)據(jù)綁定機(jī)制：

<input v-bind:value="text" type="text" />

可以簡(jiǎn)寫為：

<input :value="text" type="text" />

v-model和:value的不同之處是什么？<input :value="value" />是一種單向數(shù)據(jù)流機(jī)制。

為了理解兩者的不同之處，讓我們將先前的例子從v-model="text"改為:value="text"：

<script setup>
import { ref } from 'vue'
const text = ref('Unknown')
</script>
<template>
  <input :value="text" type="input" />
  <div>{{ text }}</div>
</template>

輸入表單的初始值為Unknown。

在輸入表單中鍵入一些字符，然而…屏幕上渲染的文本依舊是Unknown。

:value="text"讓數(shù)據(jù)流僅僅單向流動(dòng)：從text流向輸入表單。當(dāng)改變數(shù)據(jù)表單的值時(shí)，并不會(huì)改變text。

總之，v-model實(shí)現(xiàn)了雙向數(shù)據(jù)流，而:value實(shí)現(xiàn)了單向數(shù)據(jù)流。

模擬v-model

盡管兩者有差異，但是v-model可以使用:value和@input進(jìn)行模擬：

<input v-model="text" type="text" />

也可以表示為：

<input :value="text" @input="text = $event.target.value" type="text" />

下面的代碼沒有使用v-model，但雙向數(shù)據(jù)流仍然生效：

<script setup>
import { ref } from 'vue'
const text = ref('Unknown')
</script>
<template>
  <input 
    :value="text" 
    @input="text = $event.target.value" 
    type="input" 
  />
  <div>{{ text }}</div>
</template>

常規(guī)綁定:value="text"開啟了第一個(gè)流程。

當(dāng)用戶在輸入表單中輸入時(shí)會(huì)觸發(fā)@input="text = $event.target.value"，從而更新text。這就是第二個(gè)流程。

使用reactive()綁定

reactive()是Vue里的響應(yīng)式API，可以讓對(duì)象具有響應(yīng)式。

ref()和reactive()的最大不同點(diǎn)就是，ref()可以存儲(chǔ)原始值和對(duì)象，而reactive()值接受對(duì)象。并且reactive()對(duì)象可以直接訪問，而不需要像ref()那樣需要通過.value屬性訪問。

讓我們實(shí)現(xiàn)一個(gè)具有姓氏和名字的輸入表單，并將這些綁定到一個(gè)響應(yīng)式對(duì)象的屬性上：

<script setup>
import { reactive } from 'vue'
const person = reactive({ firstName: 'John', lastName: 'Smith' })
</script>
<template>
  <input v-model="person.firstName" type="input" />
  <input v-model="person.lastName" type="input" />
  <div>Full name is {{ person.firstName }} {{ person.lastName }}</div>
</template>

const person = reactive({ firstName: '', lastName: '' })創(chuàng)建了一個(gè)響應(yīng)式的對(duì)象。

v-model="person.firstName"與名字屬性綁定，以及v-model="person.lastName"與姓氏屬性綁定。

一個(gè)響應(yīng)式對(duì)象的屬性可以作為v-model的數(shù)據(jù)總線?？梢允褂眠@種方法來綁定許多輸入表單。

綁定不同輸入類型

許多其他的輸入類型比如說select、textarea、checkbox、radio都可以使用v-model綁定。讓我們來試試吧。

Textarea

為textarea綁定一個(gè)ref是非常直截了當(dāng)?shù)摹Ｖ恍枰?code>textarea標(biāo)簽上使用v-model即可：

<script setup>
import { ref } from 'vue'
const longText = ref("Well... here's my story. One morning...")
</script>
<template>
  <textarea v-model="longText" />
  <div>{{ longText }}</div>
</template>

Select

select也就是下拉框，為用戶提供了一組預(yù)定義的選項(xiàng)供其選擇。

綁定下拉框也是非常簡(jiǎn)單的：

<script setup>
import { ref } from 'vue'
const employeeId = ref('2')
</script>
<template>
  <select v-model="employeeId">
    <option value="1">Jane Doe</option>
    <option value="2">John Doe</option>
    <option value="3">John Smith</option>
  </select>
  <div>Selected id: {{ employeeId }}</div>
</template>

employeeId是與select綁定的ref，將獲得被選擇的選項(xiàng)的值。

因?yàn)?code>employeeId被初始化為'2'，因此John Doe選項(xiàng)會(huì)被選中。

當(dāng)你選擇另一個(gè)選項(xiàng)時(shí)，你可以看到employeeId以新選擇的選項(xiàng)值進(jìn)行更新。

如果select的選項(xiàng)沒有value屬性，那么就用選項(xiàng)的文本值進(jìn)行綁定：

<script setup>
import { ref } from 'vue'
const employee = ref('Jane Doe')
</script>
<template>
  <select v-model="employee">
    <option>Jane Doe</option>
    <option>John Doe</option>
    <option>John Smith</option>
  </select>
  <div>Selected: {{ employee }}</div>
</template>

現(xiàn)在，綁定直接與選項(xiàng)的文本值共同生效。如果你選擇了第二個(gè)選項(xiàng)，那么employee將被分配為"John Doe"。

Checkbox

感謝v-model讓綁定復(fù)選框很容易：

<input ref="checked" type="checkbox" />

checked被賦予一個(gè)布爾值，表示該復(fù)選框是否被選中。

讓我們創(chuàng)建一個(gè)復(fù)選框，并綁定checked：

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

checked的初始值是true，因此復(fù)選框默認(rèn)是被選中的。勾選或不勾選復(fù)選框，會(huì)相應(yīng)地將checked更新為true或false。

為了將勾選或不勾選綁定到布爾值以外的其他自定義值，Vue在復(fù)選框上提供了2個(gè)Vue特有的屬性：

<input 
  v-model="checked" 
  true-value="Yes!" 
  false-value="No" 
/>

現(xiàn)在，checked被賦值為'Yes!'或'No'字符串，這取決于復(fù)選框的狀態(tài)。

讓我們使用自定義值'Yes!'和'No'來修改先前的例子：

<script setup>
import { ref } from 'vue'
const answer = ref('Yes!')
</script>
<template>
  <label>
    <input v-model="answer" type="checkbox" true-value="Yes!" false-value="No"  />
    Want a pizza?
  </label>
  <div>{{ answer }}</div>
</template>

現(xiàn)在，answer是'Yes!'或'No'取決于復(fù)選框的選中狀態(tài)。

Radio

要綁定一組單選按鈕，要對(duì)該單選組應(yīng)用相同的總線綁定v-model="option"：

<input type="radio" v-model="option" value="a" />
<input type="radio" v-model="option" value="b" />
<input type="radio" v-model="option" value="c" />

舉個(gè)例子，讓我們實(shí)現(xiàn)一組單選按鈕，來選擇T恤的顏色：

<script setup>
import { ref } from "vue"
const color = ref("white")
</script>
<template>
  <label><input type="radio" v-model="color" value="white" />White</label>
  <label><input type="radio" v-model="color" value="red" />Red</label>
  <label><input type="radio" v-model="color" value="blue" />Blue</label>
  <div>T-shirt color: {{ color }}</div>
</template>

初始情況下，White單選框會(huì)被選中，因?yàn)?code>color的初始值為'white'。

點(diǎn)擊其他任意T恤顏色，并根據(jù)選定的顏色改變color。

單選框的value屬性是可綁定的：你可以使用:value。當(dāng)選項(xiàng)列表來自一個(gè)數(shù)組時(shí)這很有幫助：

<script setup>
import { ref } from "vue"
const color = ref("white")
const COLORS = [
  { option: "white", label: "White" },
  { option: "black", label: "Black" },
  { option: "blue", label: "Blue" },
]
</script>
<template>
  <label v-for="{ option, label } in COLORS" :key="option">
    <input type="radio" v-model="color" :value="option" /> {{ label }}
  </label>
  <div>T-shirt color: {{ color }}</div>
</template>

v-model修飾符

除了在綁定表單輸入方面做得很好之外，v-model還有一個(gè)額外的功能，叫做修飾符。

修飾符是應(yīng)用于v-model的一段邏輯，用于自定義其行為。修飾符通過使用點(diǎn)語法v-model.<modifier>應(yīng)用于v-model，例如v-mode.trim。

默認(rèn)情況下，Vue提供了3個(gè)修飾符，trim、number和lazy。

trim

清除一個(gè)字符串是指刪除字符串開頭和結(jié)尾的空白處。例如，清除應(yīng)用于' Wow! '的結(jié)果是'Wow!'。

v-model.trim修飾符在賦值給綁定的ref之前清除輸入表單的值：

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
<template>
  <input v-model.trim="text" type="text" />
  <pre>"{{ text }}"</pre>
</template>

number

v-model.number修飾符在輸入表單的值上應(yīng)用一個(gè)數(shù)字解析器。

如果用戶引入了一個(gè)可以解析為數(shù)字的值，v-model.number="number"則將解析后的數(shù)字分配給number。在其他情況下，如果引入的值不是數(shù)字，number就會(huì)被分配為原始字符串。

<script setup>
import { ref } from "vue";
const number = ref("");
</script>
<template>
  <input v-model.number="number" type="text" />
  <div>{{ typeof number }}</div>
</template>

當(dāng)你在input中引入'345'，那么number就會(huì)變成345（一個(gè)數(shù)字）。值解析會(huì)自動(dòng)發(fā)生。

但是如果你在input中引入一個(gè)非數(shù)值，比如'abc'，那么number就會(huì)被分配為相同的值'abc'。

lazy

默認(rèn)情況下，當(dāng)綁定的值更新時(shí)，v-model會(huì)使用input事件。但如果使用修飾符v-model.lazy，你可以將該事件改為change事件。

input和change事件的主要區(qū)別是什么呢？

input是每當(dāng)你在輸入表單鍵入時(shí)就會(huì)觸發(fā)。 change是只有當(dāng)你把焦點(diǎn)從輸入表單移開時(shí)，才會(huì)觸發(fā)。在輸入表單里輸入并不會(huì)觸發(fā)change事件。

下面示例使用了lazy綁定：

<script setup>
import { ref } from 'vue'
const text = ref('Unknown')
</script>
<template>
  <input v-model.lazy="text" type="input" />
  <div>{{ text }}</div>
</template>

如果你有一個(gè)許多輸入字段和大量狀態(tài)的表單，你可以應(yīng)用lazy修飾符來禁用用戶輸入時(shí)的實(shí)時(shí)響應(yīng)。這可以防止輸入時(shí)頁面卡住。

關(guān)于“Vue中怎么控制表單輸入”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。