Vue.js表单

使用v-model对表单控件进行双向绑定

1：input控件和textarea控件。

<div id="app">

<input type="text" v-model="message"/>

<p>消息是：{{message}}</p>

<textarea v-model="message2"></textarea>

<p style="white-space: pre">{{message2}}</p>

</div>

<script>

new Vue({

el:'#app',

data:{

message:'vue学习',

message2:''

}

});

</script>

2：复选框

单个复选框时，v-model中绑定的值，选定结果为true，未选定结果为false。多个复选框时，v-model中绑定的值为一个数组，选定的复选框的value值，放在数组中。数组中值的顺序按选中的顺序排列。

<div id="app">

<p>单个复选框</p>

<input type="checkbox" id="checkbox" v-model="checked"/>

<label for="checkbox">{{checked}}</label>

<p>多个复选框</p>

<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"/>

<label for="runoob" >Runoob</label>

<input type="checkbox" id="google" value="Google" v-model="checkedNames"/>

<label for="google" >Google</label>

<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"/>

<label for="taobao" >Taobao</label>

<p>选择的值为：{{checkedNames}}</p>

</div>

<script>

new Vue({

el:'#app',

data:{

checked:false,

checkedNames:['Google']

}

});

</script>

这一个示例中，需要注意的是：单个复选框不涉及value，其v-model对应选定与否，选定则为true。反之为false。多个复选框，v-model中指定的属性，其值应该是String数组。数组中可以有默认值，对应value的控件会默认选中。如果没有

默认值，也要写一个空数组：[]，如果是字符串或者null，就变为了一个复选框的效果。

其实，正确的理解方式为：根据自己的需要，是想要v-model双向绑定的结果为布尔值还是数组。如果是数组，那么对应的属性默认就需要是数组，否则，无论属性值初始定义为是null、字符串

或者是数值型，都会在绑定后变为boolean。

3：单选框

单选框多个和一个没有什么区别。v-model中绑定的属性，其值应该是字符串，对应着控件中的value。可以有默认值，对应value的控件中会默认选中。默认值可以为null。示例略。

4：select

select控件的v-model绑定的属性，对应的是option的value值。v-model放置在select控件中。没有什么特别的。示例略。

修饰符：

1：.lazy

v-model默认的是在input事件中同步输入框的数据和值。使用：v-model.lazy="message"，将在input事件中同步变为在change事件中同步

2：.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="message" type="number"/>

3：.trim

过滤首尾空格。<input v-model.trim="message"/>