这是我参与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和组件上。

想了解更多文章，传送门已开启：回首Vue3目录篇 ！