表单输入绑定

一、输入框与 v-model

我们通过以下例子来看输入框与v-model之间的搭配使用：

<template>
    <div>
        <p>msg：{{ msg }}</p>
        <input type="text" v-model="msg" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: "woniu",
        };
    },
};
</script>

运行代码后可以发现，v-model代替了输入框原本的value属性，给输入框设置了默认值woniu。
但v-model的作用不仅限于此。我们可以试着在输入框中输入任意内容，会发现页面上<p>中渲染的文本内容也同时发生了改变。
结论：
<p>的内容发生改变，是因为用户在输入框中输入新内容时，v-model会实时将新数据更新至msg，当msg的数据发生改变，<p>的内容也会随之发生更新。
简单来说，msg和输入框的值之间，通过v-model指令，建立了一种叫做“双向数据绑定”的连接，让他们能够随时保持一致：msg发生改变，输入框的默认值会随之改变；输入框的值发生改变，msg也会随之改变。

二、单选按钮与 v-model

通过输入框我们对v-model指令应该有了一个大致的了解。我们再来继续看看单选按钮与 v-model 之间的搭配使用：

<template>
    <div>
        <p>gender：{{ gender }}</p>
        <input type="radio" value="男" v-model="gender" />
        <input type="radio" value="女" v-model="gender" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            gender: "男",
        };
    },
};
</script>

运行代码后可以发现，v-model代替了单选按钮原本的checked属性，给第一个单选按钮设置了默认选中。
当我们在页面中去点击另一个单选按钮，可以发现页面上<p>中渲染的文本内容也同时发生了改变。
结论：
在单选按钮中，是通过判断v-model的值与当前单选按钮的value值是否相等，来决定其是否选中。同样的，当页面选中的单选按钮发生改变时，也会将新选中的按钮的value值更新到数据gender上去。gender发生改变，<p>的内容也就随之发生改变。

三、复选框与 v-model

复选框的使用要稍微复杂一点，因为我们在实际应用中，复选框的使用会分成两种情况：

1. 获取复选框的选中状态：true 或 false；
2. 获取复选框的选中内容

   1、获取选中状态

   我们先来看一下单个复选框和v-model的搭配使用：

   <template>
    <div>
        <p>agree：{{ agree }}</p>
        <input type="checkbox" v-model="agree" />
        <label> 我已阅读并同意以上协议</label>
    </div>
   </template>
   <script>
   export default {
    data() {
        return {
            agree: true,
        };
    },
   };
   </script>

   运行代码后可以发现，v-model代替了复选框原本的checked属性，给复选框设置了默认选中。
   当我们在页面中点击复选框取消它的选中时，可以发现页面上<p>中渲染的文本内容也同时发生了改变。
   
   结论：
   复选框的选中状态，是通过v-model值的 true 或 false 来决定的。当v-model的值为 true 时，复选框选中，当v-model的值为 false 时，复选框取消选中。同样的，当用户从页面中切换复选框的选中状态时，也会同步更新agree的布尔值。agree发生了改变，<p>的内容也就随之发生改变。

   2、获取选中内容

   我们再来看一下多个复选框和v-model的搭配使用：

   <template>
    <div>
        <p>likes：{{ likes }}</p>
        <p>兴趣爱好：</p>
        <input type="checkbox" value="吃饭" v-model="likes" /><label>吃饭</label>
        <input type="checkbox" value="睡觉" v-model="likes" /><label>睡觉</label>
        <input type="checkbox" value="打豆豆" v-model="likes" /><label>打豆豆</label>
    </div>
   </template>
   <script>
   export default {
    data() {
        return {
            likes: ["吃饭"]
        };
    },
   };
   </script>

   从上面的代码中可以看出，多个复选框之间通过v-model绑定了一个同样数组，且都设置了自己的value属性。
   运行代码后可以发现，只有第一个“吃饭”的复选框是选中的状态。当我们在页面中点击其他复选框是，可以发现页面上<p>中渲染的数组内容也同时发生了改变。
   
   结论：
   多个复选框中每一个复选框的选中状态，是通过判断其value值是否包含在v-model的数组中来决定的。当复选框的value包含在v-model的数组中，该复选框为选中状态，当复选框的value没有包含在v-model的数组中，该复选框为未选中状态。
   同样的，当用户从页面中切换复选框的选中状态时，也会同步更新likes数组的值，将复选框的value值从数组中添加或移除。likes发生了改变，<p>的内容也就随之发生改变。

   四、下拉列表与 v-model

   最后，我们再来看一下下拉列表与v-model之间的搭配使用：

   <template>
    <div>
        <p>city：{{ city }}</p>
        <select v-model="city">
            <option value="重庆">重庆</option>
            <option value="四川">四川</option>
            <option value="西安">西安</option>
        </select>
    </div>
   </template>
   <script>
   export default {
    data() {
        return {
            city: "四川"
        };
    },
   };
   </script>

   从上面的代码中可以看出，下拉列表在与v-model搭配使用时，v-model属性是添加在<select>标签上。而每一个<option>都设置了自己的value值。
   运行代码后可以发现，v-model代替了下拉列表原本的selected属性，将第二个<option>设置成了默认选中。当我们在页面中去切换下拉列表的选择时，可以发现页面上<p>中渲染的文本内容也同时发生了改变。
   
   结论：
   在下拉列表中，是通过判断v-model的值与<option>的value值是否相等，来决定其是否选中。同样的，当页面中下拉列表的选择发生改变时，也会将新选中的<option>的value值更新到数据city上去。city发生改变，<p>的内容也就随之发生改变。

   五、修饰符

   Vue 中针对v-model在输入框中的使用，提供了三个修饰符：

• .lazy：将输入框的 input 事件切换为 change 事件；
• .number：自动将用户的输入值转为数值类型；
• .trim：自动过滤用户输入的首尾空白字符。

例如：

<input type="text" v-model.lazy="msg" />
<input type="text" v-model.number="msg" />
<input type="text" v-model.trim="msg" />

v-model在默认情况下，是用户在修改输入框值的同时，data 中对应的数据会立马发生改变。而.lazy修饰符的作用，就是让用户在修改输入框值时不会立马改变 data 中的数据，而是等用户输入完成输入框失去焦点时才将输入框的值更新到 data 的数据中。