在 Vue 中控制表單輸入
Vue 中 v-model 的思路很簡單。定義一個可響應式的 text(通常是一個 ref),然後用 v-model="text" 將這個值綁定到一個 input 上。這就創造了一個雙向的數據流:
-
用戶在輸入框中輸入,
text
會發生變化。 -
text
發生變化,輸入框的值也隨之變化。
讓我們看看如何在 Vue 3 中使用v-model
來控制表單輸入。
綁定表單輸入
讓我們實現一個組件,渲染一個初始值爲Unknown
的輸入表單。用戶在輸入表單中引入的值會在屏幕上渲染出來。
v-model
很適合實現這樣一個組件。將v-model
與輸入表單連接起來需要兩個簡單的步驟:
-
const text = ref()
:作爲v-model
可響應式的值。 -
v-model="text"
:將v-model
添加到分配有text
的輸入表單標籤中。
<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
。在輸入表單裏輸入一些東西:輸入值和屏幕上的文本都會更新。
v-model="text"
在 Vue 中屬於雙向綁定數據。
第一個方向的流動發生在初始化過程中。輸入值被初始化爲Unknown
,也就是text
的初始值。
第二個方向的流動發生在給輸入表單鍵入值的時候。v-model
接受輸入框的值,並用它來更新text
。
v-model 與 v-bind
在 Vue 中,v-bind 是另一種數據綁定機制:
<input v-bind:value="text" type="text" />
可以簡寫爲:
<input :value="text" type="text" />
v-model
和:value
的不同之處是什麼?<input :value="value" />
是一種單向數據流機制。
爲了理解兩者的不同之處,讓我們將先前的例子從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"
讓數據流僅僅單向流動:從text
流向輸入表單。當改變數據表單的值時,並不會改變text
。
總之,v-model
實現了雙向數據流,而:value
實現了單向數據流。
模擬 v-model
儘管兩者有差異,但是v-model
可以使用:value
和@input
進行模擬:
<input v-model="text" type="text" />
也可以表示爲:
<input :value="text" @input="text = $event.target.value" type="text" />
<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>
常規綁定:value="text"
開啓了第一個流程。
當用戶在輸入表單中輸入時會觸發@input="text = $event.target.value"
,從而更新text
。這就是第二個流程。
使用 reactive() 綁定
reactive()
是 Vue 裏的響應式 API,可以讓對象具有響應式。
ref()
和reactive()
的最大不同點就是,ref()
可以存儲原始值和對象,而reactive()
值接受對象。並且reactive()
對象可以直接訪問,而不需要像ref()
那樣需要通過.value
屬性訪問。
讓我們實現一個具有姓氏和名字的輸入表單,並將這些綁定到一個響應式對象的屬性上:
<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: '' })
創建了一個響應式的對象。
v-model="person.firstName"
與名字屬性綁定,以及v-model="person.lastName"
與姓氏屬性綁定。
一個響應式對象的屬性可以作爲v-model
的數據總線。可以使用這種方法來綁定許多輸入表單。
綁定不同輸入類型
許多其他的輸入類型比如說select
、textarea
、checkbox
、radio
都可以使用v-model
綁定。讓我們來試試吧。
Textarea
爲textarea
綁定一個ref
是非常直截了當的。只需要在textarea
標籤上使用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
也就是下拉框,爲用戶提供了一組預定義的選項供其選擇。
綁定下拉框也是非常簡單的:
<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
,將獲得被選擇的選項的值。
因爲employeeId
被初始化爲'2'
,因此John Doe
選項會被選中。
當你選擇另一個選項時,你可以看到employeeId
以新選擇的選項值進行更新。
如果select
的選項沒有value
屬性,那麼就用選項的文本值進行綁定:
<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>
現在,綁定直接與選項的文本值共同生效。如果你選擇了第二個選項,那麼employee
將被分配爲"John Doe"
。
Checkbox
感謝v-model
讓綁定複選框很容易:
<input ref="checked" type="checkbox" />
checked
被賦予一個布爾值,表示該複選框是否被選中。
讓我們創建一個複選框,並綁定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
,因此複選框默認是被選中的。勾選或不勾選複選框,會相應地將checked
更新爲true
或false
。
爲了將勾選或不勾選綁定到布爾值以外的其他自定義值,Vue 在複選框上提供了 2 個 Vue 特有的屬性:
<input
v-model="checked"
true-value="Yes!"
false-value="No"
/>
現在,checked
被賦值爲'Yes!'
或'No'
字符串,這取決於複選框的狀態。
讓我們使用自定義值'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>
現在,answer
是'Yes!'
或'No'
取決於複選框的選中狀態。
Radio
要綁定一組單選按鈕,要對該單選組應用相同的總線綁定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" />
舉個例子,讓我們實現一組單選按鈕,來選擇 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
單選框會被選中,因爲color
的初始值爲'white'
。
點擊其他任意 T 恤顏色,並根據選定的顏色改變color
。
單選框的value
屬性是可綁定的:你可以使用:value
。當選項列表來自一個數組時這很有幫助:
<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
還有一個額外的功能,叫做修飾符。
修飾符是應用於
v-model
的一段邏輯,用於自定義其行爲。修飾符通過使用點語法v-model.<modifier>
應用於v-model
,例如v-mode.trim
。
默認情況下,Vue 提供了 3 個修飾符,trim
、number
和lazy
。
trim
清除一個字符串是指刪除字符串開頭和結尾的空白處。例如,清除應用於' Wow! '
的結果是'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
修飾符在輸入表單的值上應用一個數字解析器。
如果用戶引入了一個可以解析爲數字的值,v-model.number="number"
則將解析後的數字分配給number
。在其他情況下,如果引入的值不是數字,number
就會被分配爲原始字符串。
<script setup>
import { ref } from "vue";
const number = ref("");
</script>
<template>
<input v-model.number="number" type="text" />
<div>{{ typeof number }}</div>
</template>
當你在input
中引入'345'
,那麼number
就會變成345
(一個數字)。值解析會自動發生。
但是如果你在input
中引入一個非數值,比如'abc'
,那麼number
就會被分配爲相同的值'abc'
。
lazy
默認情況下,當綁定的值更新時,v-model
會使用input
事件。但如果使用修飾符v-model.lazy
,你可以將該事件改爲change
事件。
input
和change
事件的主要區別是什麼呢?
-
input
是每當你在輸入表單鍵入時就會觸發。 -
change
是隻有當你把焦點從輸入表單移開時,纔會觸發。在輸入表單裏輸入並不會觸發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>
如果你有一個許多輸入字段和大量狀態的表單,你可以應用lazy
修飾符來禁用用戶輸入時的實時響應。這可以防止輸入時頁面卡住。
總結
v-model
將表單輸入與ref
或響應式對象進行綁定。
綁定是通過兩個簡單的步驟實現的:
-
首先,通過
const text = ref('')
創建ref
。 -
其次,將
ref
分配給v-model
屬性:<input v-model="text" type="text" />
。
本文譯自:https://dmitripavlutin.com/vue-v-model-form-inputs/[1]
參考資料
[1]
https://dmitripavlutin.com/vue-v-model-form-inputs/: https://dmitripavlutin.com/vue-v-model-form-inputs/
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/nnGzSSeWzVFFfMg9X71RLg