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

一、v-model 指令

用于Vue 表单双向绑定

用户Vue 组件属性双向绑定

v-model 还可以用于各种不同类型的输入，</code>、<code><select></code> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：</p> <ul> <li>文本类型的 <code><input></code> 和 <code><textarea></code> 元素会绑定 <code>value</code> property 并侦听 <code>input</code> 事件；</li> <li><code><input type="checkbox"></code> 和 <code><input type="radio"></code> 会绑定 <code>checked</code> property 并侦听 <code>change</code> 事件；</li> <li><code><select></code> 会绑定 <code>value</code> property 并侦听 <code>change</code> 事件。</li> </ul> <p></p> <p><span style="color:#fe2c24"><strong>二、v-model 使用案例</strong></span></p> <p>文本</p> <pre><code class="language-html">姓名： <input type="text" v-model="student.name"></code></pre> <p>多行文本</p> <pre><code class="language-html">简介：<textarea v-model="student.summary">

单选

所属省份：

多选

多选省份：

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

下拉选择

下拉选择：

    {{ item }}

三、v-model 修饰符

.lazy​

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

.number​

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

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

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

.trim​

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