表单输入绑定

1.基础用法

v-model指令在表单元素上创建双向数据绑定

v-model会忽略表单元素的value, checked, selected的初始值，使用v-model绑定值

<!-- 文本框 -->
<input type="text" v-model="text"/>
<!-- 复选框(单个勾选框) -->
<input type="checkbox" v-model="checked"/>
<label>{{checked}}</label>
<!-- 复选框(多个勾选,绑定同一个数据) -->
<input type="checkbox" value="1" v-model="checkboxes"/>
<input type="checkbox" value="2" v-model="checkboxes"/>
<label>{{checkboxes}}</label>
<!-- 单选框 -->
<input type="radio" value="1" v-model="radios"/>
<input type="radio" value="2" v-model="radios"/>
<label>{{radios}}</label>
<!-- 选择列表 -->
<select v-model="select">
    <!-- 建议提供disabled -->
    <option disabled value="">请选择</option>
    <option v-for="item in items" :value="item.id">{{item.name}</option>
</select>

var app = new Vue({
    el: "#app",
    data: {
        text: "",
        checked: true,
        checkboxes: [],
        radios: [],
        select: "",
        items: [{id: 1, name: "66"}, {id: 2, name: "77"}],
    }
});

2.绑定value

<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b"/>
<label>{{toggle}}</label>
<!-- 选择列表 -->
<select v-model="select">
    <!-- :value绑定一个对象 -->
    <option v-for="item in items" :value="item">{{item.name}}</option>
</select>
<label>{{select}}</label>

var app = new Vue({
    el: "#app",
    data: {
        toggle: "",
        a: "a",
        b: "b",
        select: "",
        items: [{id: 1, name: "66"}, {id: 2, name: "77"}]
    }
});

3.修饰符

<!-- 修饰符lazy,将v-model绑定值同步延迟到change事件 -->
<input v-model.lazy="text"/>
<!-- 修饰符number,将v-model绑定的值转换为Number类型 -->
<input v-model.number="number"/>
<!-- 修饰符trim,将v-model绑定的值过滤首尾空格 -->
<input v-model.trim="text"/>