回首Vue3之指令篇（七）

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰

這篇文章咱們來說一下v-model的使用方法，以及在使用它的時候咱們須要注意的地方。

官方說，你能夠用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。它負責監聽用戶的輸入事件來更新數據，並在某種極端場景下進行一些特殊處理。

如何使用

v-model 在內部爲不一樣的輸入元素使用不一樣的 property 並拋出不一樣的事件。

• .lazy - 監聽 change 而不是 input 事件
• .number - 輸入字符串轉爲有效的數字
• .trim - 輸入首尾空格過濾

input上使用

type="text"

input（type="text"）元素使用 value property 和 input 事件。以下：

<input type="text" v-model="value">
<textarea name="" id="" cols="30" rows="10" v-model="value"></textarea>
複製代碼

如上所述代碼，v-model的做用就是：當input元素的值改變的時候綁定值value也會發生改變，當綁定值value改變時，input元素的value值也發生對應的改變。

type="checkbox" 和 type="radio"

checkbox 和 radio 使用 checked property 和 change 事件。以checkbox爲例以下：

<ol>
    <li v-for="user in users" :key="user.name">
        <input type="checkbox" :value="user.name" :id="user.name" v-model='checkedNames'>
        <span>{{user.name}}</span>
    </li>
</ol>
複製代碼

const { createApp, ref } = Vue
const app = createApp({
    setup() {
        const checkedNames = ref([])
        const users = ref([
            { name: '程咬金', checked: false },
            { name: '花木蘭', checked: false },
            { name: '安琪拉', checked: false },
            { name: '李元芳', checked: false },
            { name: '貂蟬', checked: false },
        ])
        return {
            checkedNames,
            users
        }
    }
})

const vm = app.mount("#app")
複製代碼

按照上述渲染結果，咱們選擇前三項的話，checkedNames的值會變爲：

Proxy {0: "程咬金", 1: "花木蘭", 2: "安琪拉"}
複製代碼

但其本質是<input type="checkbox" value="程咬金" id="程咬金">對應的checked值發生了變化。

select上使用

select 字段將 value 做爲 prop 並將 change 做爲事件。以下：

<select v-model="selected">
    <option v-for="user in users">{{user}}</option>
</select>
複製代碼

const { createApp, ref } = Vue
const app = createApp({
    setup() {
        const selected = ref()
        const users = ref(['程咬金','花木蘭','安琪拉','李元芳','貂蟬'])
        return {
            selected,
            users
        }
    }
})

const vm = app.mount("#app")
複製代碼

如上述代碼，當selected發生變化的時候，select的value值也發生了變化；反之，亦然。

textarea上使用

v-model在textarea的使用方式同input type="text"的狀況。

組件上使用

如何使用

默認狀況下，組件上的 v-model 使用 modelValue 做爲 prop 和 update:modelValue 做爲事件。那麼v-model 具體是怎麼使用的呢？以下：

自定義組件 my-component

app.component('my-component', {
        props: {
            title: String
        },
        emits: ['update:title'],
        template: ` <input type="text" :value="title" @input="$emit('update:title', $event.target.value)"> `
    })
複製代碼

使用

//簡寫
<my-component v-model:title="title"></my-component>

//使用 v-bind 全寫 
<my-component :title="title" @update:title="title=$event"></my-component>
複製代碼

上述代碼能夠看出，咱們在使用的時候能夠給組件傳值，而當組件裏的值發生變化的時候，又能夠動態的更改咱們傳入值的變量。

注意事項

值得咱們注意的是，在Vue3中 v-model的使用對比Vue2發生了很大的變化。

1. 用於自定義組件時，v-model prop 和事件默認名稱已更改：

   • prop：value -> modelValue；
   • event：input -> update:modelValue；

2. v-bind 的 .sync 修飾符和組件的 model 選項已移除，可用 v-model 做爲代替。

3. 如今能夠在同一個組件上使用多個 v-model 進行雙向綁定；

4. 如今能夠自定義 v-model 修飾符。

總結

1. 在Vue3中，咱們能夠在同一組件上使用多個v-model 進行雙向綁定。

2. 通常在登錄的時候咱們會使用修飾符來驗證，固然根據你的需求能夠在特定的地方使用修飾符，另外在Vue3中咱們也能夠自定義修飾符。

3. v-model咱們只用在元素input、textarea、select和組件上。