表单控件绑定

你可以用v-model指令在表单控件元素创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，单v-model

本质上不过是语法糖，它负责监听用户的输入事件以更新数据。并特别处理一些极端的例子。

v-model并不关心表单控件初始化所生成的值。因为它会选择vue实例数据来作为具体的值。

文本

<input type='text' v-model="message" placeholder="edit me">

<p>message is：{{message}}</p>

多行文本

<p style="white-space='prev'">{{multiline}}</p>

<textarea v-model="multiline"></textarea>

在文本区域插值（<textarea></textarea>）并不会生效，应用v-model来代替

复选框

单个勾选框，逻辑值：

<input type="checkbox" v-model="checked" id="check1">

<label for="check1">{{checked}}</label>

data:{

　　checked:false

}

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

<input type="checkbox" v-model="checkArr" value="1">1
<input type="checkbox" v-model="checkArr" value="2">2
<input type="checkbox" v-model="checkArr" value="3">3
<input type="checkbox" v-model="checkArr" value="4">4
<div>选中的数据:{{checkArr}}</div>

data:{

　　checkArr:[]

}

单选按钮：

<input type="radio" v-model="radioChecked" value="1">喜欢
<input type="radio" v-model="radioChecked" value="0">不喜欢
<div>选中的数据是：{{radioChecked}}</div>

data:{

　　radioChecked:null

}

选择列表

单选列表

<select v-model="selected">
        <option vlaue="1">1</option>
        <option vlaue="2">2</option>
        <option vlaue="3">3</option>
        <option vlaue="4">4</option>
    </select>
    <div>{{selected}}</div>

data:{
selected:null
}

多选列表

<select v-model="selectedArr" multiple>
        <option vlaue="1">1</option>
        <option vlaue="2">2</option>
        <option vlaue="3">3</option>
        <option vlaue="4">4</option>
    </select>
    <div>{{selectedArr}}</div>

data:{

selectedArr:[]

}

选择列表与v-for结合,动态选项，用v-for渲染

<select v-model="selectedArr2" multiple>
        <option v-for="option in optionArr" v-bind:value="option.value">{{option.text}}</option>
    </select>
    <div>{{selectedArr2}}</div>

data:{

　　selectedArr2:[]

}

绑定value

对于单选按钮，勾选框以选择列表选项，v-model绑定的vlaue通常是静态字符串（对于勾选框是逻辑值）：

但是有时我们想绑定value到Vue实例的一个动态属性上，这时我们就可以使用v-bind实现，并且这个属性的值可以不是字符串

复选框

 <input type="checkbox" v-model="checked1" v-bind:true-value="a" v-bind:false-value="b">动态绑定value值
    <div>选择的值是：{{checked1}}</div>

data:{

　　checked1:null,

　　a:1,

　　b:2

}

单选框

<input type="radio" v-model="radio1" v-bind:value="a">true
    <input type="radio" v-model="radio1" v-bind:value="b">false
    <div>单选框选中的值：{{radio1}}</div>

data:{

　　radio1:null,

　　a:1,

　　b:2

}

选择列表设置：

 <select v-model="selected1">
        <option v-bind:value="a">a</option>
        <option v-bind:value="b">b</option>
        <option v-bind:value="c">c</option>
        <option v-bind:value="d">d</option>
    </select>
    <div>选择列表选择的数据：{{selected1}}</div>

data:{

　　selected1:null,

　　a:1,

　　b:2,

　　c:3,

　　d:4

}

内联对象字面量

 <select v-model="selected2">
        <option v-bind:value="{number:123}">a</option>
    </select>
    <div>选择列表选择的数据：{{selected2.number}}</div>

data:{
　　selected2:null
}
vm.selected2.number=123

修饰符

.lazy

在默认情况下，v-model在input 事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步：

<!--在'change'而不是‘input’事件中更新-->

<input v-model.lazy="message">

.number

如果想自动将用户的输入值转为Number类型（如果原值的转换结果为NaN则返回原值），可以添加一个修饰符number给v-model来处理输入的值：

<input v-model.number="number1" type='number'>

这通常很有用，因为在type='number'时，HTML只能怪输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格。可以添加trim修饰符到v-model上过滤输入:

<input type='text' v-model.trim="message">