<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue学习-表单</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!--你可以用 v-model 指令在表单控件元素上创建双向数据绑定。-->
<!--v-model 会根据控件类型自动选取正确的方法来更新元素。-->
<!--input 和 textarea 元素中使用 v-model 实现双向数据绑定：-->
<!--例1：-->
<div id="div1">
<p>input元素：</p>
<input type="text" v-model="message" placeholder="编辑我..." />
<p>消息是：{
{message}}</p>
<p>textarea元素：</p>
<textarea v-model="message2" placeholder="多行编辑..."></textarea>
<p style="white-space: pre;">{
{message2}}</p>
</div><br /><br />
<!--复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：-->
<!--以下实例中演示了复选框的双向数据绑定：-->
<!--例2：-->
<div id="div2">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{
{checked}}</label>
<p>多个复选框：</p>
<input type="checkbox" id="lanqiu" value="篮球" v-model="checkedlike" />
<label for="lanqiu">篮球</label>
<input type="checkbox" id="zuqiu" value="足球" v-model="checkedlike" />
<label for="zuqiu">足球</label>
<input type="checkbox" id="wangqiu" value="网球" v-model="checkedlike" />
<label for="wangqiu">网球</label>
<br />
<span>选择的值为：{
{checkedlike}}</span>
</div><br /><br />
<!--单选按钮的双向数据绑定：-->
<!--例3：-->
<div id="div3">
<input type="radio" value="男" id="nan" v-model="checkedsex"/>
<label for="nan">男</label>
<br />
<input type="radio" value="女" id="nv" v-model="checkedsex" />
<label for="nv">女</label>
<br />
<span>选择的值为：{
{checkedsex}}</span>
</div><br /><br />
<!--下拉列表的双向数据绑定：-->
<!--例4：-->
<div id="div4">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.baidu.com">百度</option>
<option value="www.google.com">谷歌</option>
</select>
<br /><br />
<div>
选择的网站时：{
{selected}}
</div>
</div><br /><br />
<script>
new Vue({
el:'#div1',
data:{
message:'你好！',
message2:'小爱'
}
});
new Vue({
el:'#div2',
data:{
checked:false,
checkedlike:[]
}
});
new Vue({
el:'#div3',
data:{
checkedsex:'男'
}
});
new Vue({
el:'#div4',
data:{
selected:''
}
})
</script>
</body>
</html>
修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">