Text
可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。
<div id="app">
<span>Message is:{{msg}}</span><br />
<input type="text" v-model="msg" placeholder="edit me">
</div>
Js代码
var vm = new Vue({
el: '#app',
data: {
msg:"Hello world"
}
})
其中placeholder为默认显示提示。
渲染为：
Checkbox
多个勾选逻辑值，如下代码：
<div id="app">
<span>checkbox value is {{msg}}</span>
<input type="checkbox" v-model="msg" v-bind:true-value="a" v-bind:false-value="b">
</div>
var vm = new Vue({
el:"#app",
data:{
a:"a",
b:"b"
}
})
Radio
<div>
<span>radio value is:{{pick}}</span>
<input type="radio" v-model="pick" v-bind:value="a">
</div>
var vm = new Vue({
el: 'div',
data: {
a:"a"
}
})
select
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
</select>
<span>Selected:{{selected}}</span>
</div>
JS代码
var vm = new Vue({
el:"#app",
data:{
selected:"A",
options:[
{value:"A",text:"One"},
{value:"B",text:"Two"},
{value:"C",text:"Three"}
]
}
})
参数特性
lazy
在默认情况下，v-model 在input 事件中同步输入框值与数据，可以添加一个特性 lazy，从而改到在 change 事件中同步：
如下实例，当在文本框中输入完成以后，才更新内容：
<span>Message is:{{msg}}</span>
<input type="text" v-model="msg" lazy>
number
如果想自动将用户的输入保持为数字，可以添加一个特性 number：
<input v-model="age" number>
debounce
debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。
<input v-model="msg" debounce="500">
注意 debounce 参数不会延迟 input 事件：它延迟“写入”底层数据。