普通文本输入框双向绑定
<body>
<div id="app">
<input type="text" v-model="message1" placeholder="编辑...">
{{message1}}
<br/>
<textarea v-model="message2"></textarea>
{{message2}}
</div>
<script>
new Vue({
el:"#app",
data:{
message1: 'message1',
message2: 'message2'
}
})
</script>
</body>
复选框双向绑定
<body>
<div id="app">
<input type="checkbox" id="apple" value="苹果" v-model="message">
<label for="apple">苹果</label>
<input type="checkbox" id="sanxing" value="三星" v-model="message">
<label for="sanxing">三星</label>
<input type="checkbox" id="xiaomi" value="小米" v-model="message">
<label for="xiaomi">小米</label>
<p>选中：{{message}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
message: []
}
})
</script>
</body>
单选框双向绑定
<body>
<div id="app">
<input type="radio" id="apple" value="苹果" v-model="selected">
<label for="apple">苹果</label>
<input type="radio" id="sanxing" value="三星" v-model="selected">
<label for="sanxing">三星</label>
<input type="radio" id="xiaomi" value="小米" v-model="selected">
<label for="xiaomi">小米</label>
<p>选中：{{selected}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
selected : '苹果'
}
})
</script>
</body>
下拉列表双向绑定
<body>
<div id="app">
<select v-model="selected">
<option value="">请选择一种手机</option>
<option value="苹果">苹果</option>
<option value="三星">三星</option>
<option value="小米">小米</option>
</select>
你选择了：{{selected}}
</div>
<script>
new Vue({
el:"#app",
data:{
selected : ''
}
})
</script>
</body>
修饰符
lazy。< input v-model.lazy=“msg” >，在change事件后也就是鼠标光标退出后进行更新vmnumber。< input v-model.number=“age” type=“number”>，将vm中转成number类型数据trim.< input v-model.trim=“msg”>,取出vm中的前后空格
