可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
1、单行文本
<body>
<div id="example">
<input type="text" v-model="message">
<p>Message is:{{message}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
message:""
}
});
</script>2、多行文本
<body>
<div id="example">
<span>Mulitline message is:</span>
<p style="white-space:pre">{{message}}</p>
<br>
<textarea v-model="message" placeholder="add mulitine lines..."></textarea>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
message:""
}
});
</script>3、复选框
<body>
<div id="example">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
checked:false
}
});
</script>4、复选框（升级版）
<body>
<div id="example">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
checkedNames:[]
}
});
</script>5、单选按钮
<body>
<div id="example">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked:{{picked}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
picked:""
}
});
</script>6、选择列表
<body>
<div id="example">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Sclected:{{selected}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
selected:""
}
});
</script>7、绑定value
复选框
<body>
<div id="example">
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b">
<p>{{toggle}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
a:'a',
b:'b' ,
toggle:"b"
}
});
</script>单选按钮
<body>
<div id="example">
<input
type="radio"
v-model="picked"
v-bind:value="a">
<p>{{picked}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
a:'a',
picked:""
}
});
</script>