回首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和组件上。