Vue 表单输入绑定，双向绑定

一、v-model 指令

用于Vue 表单双向绑定

用户Vue 组件属性双向绑定

v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

• 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
• <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
• <select> 会绑定 value property 并侦听 change 事件。

二、v-model 使用案例

文本

姓名：  <input type="text" v-model="student.name">

多行文本

简介：<textarea v-model="student.summary"></textarea>

单选

所属省份：
<template v-for="item in areas">
    <div>
    <label > <input type="radio" name="area" :value="item" v-model="student.province">{{item}}</label>
    </div>
</template>

<script>
export default {
    data() {
        return {
            student: {
                name: '张三',
                score: 100.5,
                password: ' 1234 '
            },
            age: 10.8,
            areas: ['济南', '聊城', '北京']
        }
    }
}
</script>

多选

多选省份：
<template v-for="item in areas">
    <div>
        <label> <input type="checkbox" name="checkvalue" :value="item" v-model="student.checkvalue">{{ item }}</label>
    </div>
</template>

export default {
    data() {
        return {
            student: {
                checkvalue:[]//多选框需要对应数组
            }
        }
    }
}

下拉选择

下拉选择：
<select v-model="student.sel">
    <option :value="item" v-for="item in areas">{{ item }}</option>
</select>

三、v-model 修饰符

.lazy​

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

.number​

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

   <input type="number" v-model.number="student.score">

如果该值无法被 parseFloat() 处理，那么将返回原始值。特别是当输入为空时 (例如用户清空输入字段之后)，会返回一个空字符串。

注意：要制定type=number html属性

.trim​

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

    <input v-model.number="student.password">