Vue学习：4.v-model使用

第一节算是对v-model的粗略了解，仅仅是将input的输入与Vue 实例的数据之间双向绑定。这一节将更详细的了解v-model在不同表单元素中的使用。

v-model实例：找对象

实现功能：

使用v-model实现快速获取或设置其他表单元素（单选框、复选框、下拉菜单、文本框等）的值。

思路：

v-model会根据控件类型自动选取正确的方法来更新元素。

输入框 input:text   → value

文本域 textarea    → value

复选框 input:checkbox   → checked

单选框 input:radio  → checked

下拉菜单 select  → value

代码：

html：

<div id="app">
        <h3>个人简历</h3>
        <p>姓名：
            <input v-model="username" type="text">
        </p>
        <br>
        <p>是否单身：
            <input v-model="isSingle" type="checkbox">
        </p>
        <br>
        <p>性别：
            <input v-model="sex" type="radio" name="sex" value="1">男
            <input v-model="sex" type="radio" name="sex" value="0">女
        </p>
        <br>
        <p>所在城市：
            <select v-model="city">
                <option value="101">北京</option>
                <option value="102">上海</option>
                <option value="103">广州</option>
                <option value="104">深圳</option>
            </select>
        </p>
        <br>
        <p>自我描述：<br>
            <textarea v-model="dec" cols="30px" rows="5px"></textarea>
        </p>
</div>

js：

<script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                isSingle: true,
                sex: 1,
                city: '101',
                dec: ''
            }
        })
 </script>

关于v-model的其他方面：

v-model 也支持一些修饰符，用于处理特定的情况。例如：

• .lazy：默认情况下，v-model 会在每次输入框的 input 事件触发时同步数据，使用 .lazy 修饰符可以改为在 change 事件触发时同步数据。
• .number：自动将用户的输入值转为数字类型。
• .trim：自动去除用户输入值的首尾空白字符。