一、基本用法
v-model 指令在表单 、 及 元素上创建双向数据绑定。
<div id="app">
<input type="" v-model="message" placeholder="输入..." />
<p>输入的内容是：{{message}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
对于文本域textarea 也是同样的用法：
<input type="" v-model="text" placeholder="输入..."/>
<p style="white-space :pre">{{text}}</p>
单选按钮
单选按钮在单独使用时。不需要v-model, 直接使用v-bind 绑定一个布尔类型的值，为真选中，为否时不选
<div id="app">
<input type="radio" :checked="picked" />
<label for="">单选按钮</label>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
picked:true
}
})
</script>
如果是组合使用来实现互斥选择的效果，就需要v-model 配合value 来使用
<div id="app">
<input type="radio" v-model="picked" value="html" id="html" />
<label for="html">Html</label>
<br />
<input type="radio" v-model="picked" value="js" id="js" />
<label for="js">js</label>
<br />
<input type="radio" v-model="picked" value="css" id="css" />
<label for="css">Css</label>
<p>选择的项是 ：{{picked}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
picked: 'css'
}
})
</script>
复选框
分为单独使用和复使用，单独使用时也使用v-model来绑定一个布尔值。
<input type="checkbox" v-model="checked" id="checked" />
<label for="checked">选择状态：{{checked}}</label>
多选框组合使用
<div id="app">
<input type="checkbox" v-model="checked" value= "html" id="html"/>
<label for="html">Html</label>
<br />
<input type="checkbox" v-model="checked" value= "js" id="js"/>
<label for="js">js</label>
<br />
<input type="checkbox" v-model="checked" value="css" id="css" />
<label for="css">Css</label>
<p>选择的项是 ：{{checked}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
checked:['html','css']
}
})
</script>
选择列表：分为单选和多选
<select v-model="selected">
<option>html</option>
<option>css</option>
<option>js</option>
<p>选择的项是：{{selected}}</p>
</select>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selected:'html'
}
})
</script>
给添加属性 multiple 就可以多选了，此时v-model 绑定的是一个数组。
<select v-model="selected" multiple>//添加multiple 可以多选
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selected:['html','js']//绑定的是一个数组
}
})
</script>
二、绑定值
绑定一个动态数据可以用v-bind来实现
单选
<div id="app">
<input type="radio" v-model="picked" :value="value" />
<label for="">单选按钮</label>
<p>{{ picked }}</p>
<p>{{ value }}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
picked:false,
value: 123
}
})
</script>
再选中时，app.picked === app.value, 值都是123
复选框
勾选时，app.toggle=app.value1;未勾选时，app.toggle=app.value2
<div id="app">
<select v-model="selected">
<option :value="{number:123}">123</option>
</select>
{{selected.number}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
selected:''
},
})
</script>
当选中时，app.selected 是一个Object,所以app.selected.number === 123
三、修饰符
v-model 也有修饰符，用于控制数据同步的时机
.lazy:
在输入框中，v-model默认是在input事件中同步输入框的数据（除中文外），使用.lazy修饰符会在change事件中同步。
<div id="app">
<input type="text" v-model.lazy="message">
<p>输入的内容为：{{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>
这时，message不是实时改变的，只在失去焦点或者回车才更新。
.number
使用.number可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型依然是String。
.trim:
修饰符.trim可以自动过滤首尾空格。
<div id="app">
<input type="text" v-model.trim="message">
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>