前端框架vue.js系列（5）：表单元素的双向绑定

vue中常用到的表单组件主要有文本输入框，单选框，多选框和下拉列框。本篇将会讲述如何使用这些原生组件及这些组件在vue框架中的一些特性。vue与这些组件的绑定方法是：v-model，这种绑定是双向绑定。

文本输入框

文本输入框是type='text'的input元素，绑定方法如下：

Message is: {
    { message }}

单选框

单选框是type='radio'的input元素，绑定的选中项值与元素的value属性值匹配，返回的是一个字符串。

One

Two

当元素中同时存在value属性和v-bind:value时，绑定的值以v-bind:value优先，即上例中当选择One选项时，picked的值为NewValue，这种设置方法的好处在于实现选项的文本内容与绑定的数据值不一样。

多选项

单选框是type='checkbox'的input元素，绑定的选中项值与元素的value属性值匹配，当只有一个复选框时，返回的是真假；当有多个复选框时，返回是一个数组。

{
    { checked }}




Jack

John

Mike


Checked names: {
    { checkedNames }}

下拉列

下拉列使用select元素，与元素的innerHtml值匹配,即select的value值。

	请选择
	A
	B
	C

Selected: {
    { selected }}


	请选择
	
		{
    { option.value }}
	

Selected: {
    { selected1 }}