基础语法

可以使用v-model指令在表单< input/>、< textarea/>及< select>等元素上创建双向数据绑定，会根据控件类型自动选取方法更新元素。

v-model会忽略所有表单的元素value、checked、select元素的初始值，总是将Vue实例的数据作为数据来源，需要在data属性中声明初始值。

v-model在内部使用不同的属性为不同的输入元素，并抛出不同的事件:

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

#文本

<input v-model="message"/>
< p>{{message}}</p>

#多行文本

< textarea v-model="message"></textarea>
< p>{{message}}</p>

#复选框

单个复选框绑定到布尔值

< input id="checked" type="checkbox" v-model="checked"/>
< lable for="checked">{{checked}}</label>

多个复选框绑定到同一数组

<div id="test" >
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames" />
    <label for="jack">jack</label>
    <input type="checkbox" id="join" value="join" v-model="checkedNames" />
    <label for="join">join</label>
    <span>select is {{checkedNames}}</span>
</div>

new Vue({
    el:"#test",
    data:{
        checkedNames:[]
    }
})

#单选按钮

<div id="test" >
    <input type="radio" id="jack" value="jack" v-model="checkedNames" />
    <label for="jack">jack</label>
    <input type="radio" id="join" value="join" v-model="checkedNames" />
    <label for="join">join</label>
    <span>select is {{checkedNames}}</span>
</div>

new Vue({
    el:"#test",
    data:{
        checkedNames:""
    }
})

#选择框

<div id="test" >
    <select v-model="selectedName">
        <option disabled="disabled">请选择</option>
        <option>jack</option>
        <option>join</option>
    </select>
    <span>select is {{selectedName}}</span>
</div>

new Vue({
    el:"#test",
    data:{
        selectedName:""
    }
})

若v-model表达式未能匹配到任何选项，select元素将被渲染成未选中状态，在ios中回使第一个元素无法选择。因为这样的情况在ios并不会触发change事件，建议使用一个值为空的禁用选项。

可使用multiple多选属性

<div id="test" >
    <select v-model="selectedName" multiple>
        <option disabled="disabled">请选择</option>
        <option>jack</option>
        <option>join</option>
    </select>
    <span>select is {{selectedName}}</span>
</div>

使用v-for动态渲染选项

<div id="test" >
    <select v-model="selectedName">
        <option disabled="disabled">请选择</option>
        <option v-for="option in options" :value="option.value">{{option.text}}</option>
    </select>
    <span>select is {{selectedName}}</span>
</div>

new Vue({
    el:"#test",
    data:{
        selectedName:"",
        options:[
            {value:"jack",text:"jack"},
            {value:"join",text:"join"}
        ]
    }
})

值绑定

对于单选框，复选框，以及下拉框的选项，v-model的绑定值一般都是字符串(对于单选和复选框也可以是布尔值)

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

我们也可以把值绑定到vue实例上，绑定的属性值可以不是字符串。

#复选框

<div id="test" >
    <input type="checkbox" v-model="toggle" true-value="true" false-value="false" />
    {{toggle}}
</div>

var vm=new Vue({
    el:"#test",
    data:{
        toggle:""
    }
})

vm.toggle==true//选中状态时
vm.toggle==false//取消选中状态时

#单选按钮

<div id="test" >
<input type="radio" v-model="pick" id="abc" v-value="abc" />
<input type="radio" v-model="pick" id="def" value="def" />
{{pick}}
</div>

new Vue({
el:"#test",
data:{
pick:""
}
})

#选择框的选项

<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>

// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

#.lazy

默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步。可以添加 ==.lazy== 属性，从而转变为使用change事件进行同步。

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

#.number

如果想给输入的值自动转为number类型可以使用.number修饰符。

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

#.trim

过滤用户输入首尾空字符

<input v-model.trim="msg" />

在组件上使用v-model

HTML 原生的输入元素类型并不总能满足需求。\Vue 的组件系统允许创建具有完全自定义行为且可复用的输入组件。这些输入组件可以和 v-model 一起使用.