Vue.js中的v模型说明和绑定表单元素的方法

我们可以使用Vue.js中的v-model指令来完成表单数据的双向绑定。

1基本用法

1.1文本输入框(文本)

这里演示了文本输入框中的输入将实时映射到绑定数据。

html:

Div id=' app '输入类型=' text' v-model=' content '占位符='请输入' pInput框：{{content}}/p/divjs:

脚本var app=new Vue({ el: '#app '，data : { content : ' ' })；/脚本效果：

1.2大文本输入框(文本区)

绑定方法与文本输入框相同。

html:

div id=' app 2 ' text area v-model=' content ' placeholder='请输入'/text area pcontent:/p p style=' white-space : pre ' { content } }/p/div js:

var app2=new Vue({ el: '#app2 '，data : { content : ' ' })；

效果：

White-space: pre style被添加到与显示内容相对应的p元素中，因此即使回车，内容也将被保留。

-

注意：窗体控件显示的值仅取决于绑定数据，因此即使设置了窗体控件中的值，它也不会起作用。同样，textareaxxx/textarea之间的值无效。

在前面的例子中，我们可以发现使用中文输入法时，ruvue.js只会更新选中的单词，如果想要输入实时更新，可以使用@input。

html:

div id=' app 3 ' textarea @ input=' input thandler '占位符='请输入'/textarea p content:/p p style=' white-space : pre ' { content } }/p/div js:

var app3=new Vue({ el: '#app3 '，data: { content: '' }，methods: { inputHandler:函数(事件){ this . content=event . target . value；} }});

可以看到，即使@input中定义的函数没有参数，Vue.js也会传入定义函数中的事件原生事件对象(示例中的inputHandler)。

效果：

1.3无线电盒

一般来说，一个收音盒有多种条件可供选择。既然是收音盒，我们自然要达到互斥效果。我们可以用v型指令来配合收音盒的数值。

html:

Div id=' app4 '输入id=' radio1 '类型=' radio' v-model=' checked '值='文学'标签为=' radio1 '文学/Labelinput id=' radio2 '类型=' radio' v-model=' checked '值=' art '标签为=' radio 2 ' art/Labelinput id=' radio 3 '类型=' radio' v-model=' checked '值=' economy '标签为=' radio 3 ' economy/label br p selected:{ { checked } }/p/div js

Varapp4=newvue ({el:' # app4 '，data: {checked 3360 '文献' } })；

效果：

1.4复选框

复选框的绑定方式与单选框相同，只是与复选框对应的数据类型是数组。

html:

Div id=' app5 '输入id=' checkbox1 '类型=' checkbox' v-model=' checked '值='文学'标签为=' checkbox1 '文学/Labelinput id=' checkbox2 '类型=' checkbox' v-model=' checked '值=' art '标签为=' checkbox 2 ' art/Labelinput id=' checkbox 3 '类型=' checkbox' v-model=' checked '值=' economic '标签为='checkbox3' economic /label br p所选：{{checked}}

Varapp5=newvue ({el:' # app5 '，data: {checked 3360 ['文学'，'艺术']} })；

效果：

1.5下拉选择框

1.5.1单一选择

html:

Div id=' app 6 '选择v-model=' selected '选项值=' 1 '文献/选项值='2 '艺术/选项选项经济/选项/选择br p selected: {{selected}}/p/div

js:

var app6=new Vue({ el: '#app6 '，data : { selected : ' 1 ' })；

效果：

可以看出，如果option包含一个值，它会先匹配该值；如果不是，匹配选项中的文本值(例如示例中的选项经济/选项)。

1.5.2多重选择

将多重属性添加到选择标签，可以实现多重选择。

html:

Div id=' app 7 '选择v-model=' selected '多个选项值=' 1 '文献/选项值='2 '艺术/选项经济/选项/选择br p selected:{ { selected } }/p/div

在实际应用场景，选择标签中的意见一般是通过迭代指令动态输出的，其中每一项的价值或文本都可以使用垂直装订动态输出的。

html:

div id='app8 '选择v型='选定'选项v-for=' options ' : value=' option。值“{ option。text } }/option/select br p选择了：{ {选定}}/p/div

js:

var app8=new Vue({ el: '#app8 '，data: { selected: '1 '，options: [ {text: '文学，value: '1'}，{text: '艺术，值： ' 2 ' }]})；效果：

-

因为挑选标签的呈现样式依赖于浏览器，所以在实际业务场景中，我们更多的是使用差异来模拟挑选标签的列表功能，而这可以通过使用Vue.js自定义组件的方式来实现一个通用的下拉选择组件。

以上示例演示

2绑定动态变量

之前所说的示例v型绑定的都是静态变量。我们可以使用垂直装订来绑定动态变量。

2.1 单选框

html:

div id='app '输入id='radio1 '类型=' radio ' v-model=' pick ' : value=' value '标签为='radio1 '文学/label输入id=' radio 2 ' type=' radio ' v-model=' picked ' : value=' value 2 ' label for=' radio 2 '艺术/label input id=' radio 3 ' type=' radio ' v-model=' picked ' : value=' value 3 ' label for=' radio 3 '经济/label br p { { pick } }/p p { { value } }，{{value2}}，{{value3}}/p/div

js:

var app=new Vue({ el: '#app '，data: { picked: false，value: '文学，value2: '艺术，value3: '经济', }});

效果：

示例中定义的单选框默认值为精选的所定义的假的。当选中某个单选框时，则动态绑定在：值中定义的变量。

2.2 复选框

html:

div id='app2 '输入id='复选框'类型=' checkbox ' v-model=' checked ' : true-value=' value 1 ' : false-value=' value 2 '标签为='复选框'开关/label p checked:{ { checked } }/p p值1:{ { value 1 } }/p值2:{ { value 2 } }/p/div

js:

var app2=new Vue({ el: '#app2 '，data: { value1: '亮，value2: '暗，勾选了： ' ' } })；效果：

复选框的默认值绑定的是v型定义的变量，而勾选与取消勾选所绑定的值，则分别由：价值与假值来实现动态绑定。

2.3 下拉选择框

html:

div id='app3 '选择v型='选定'选项： value=“{ number :1 }”文学/option option : value=“{ number :2 }”艺术/option/选择市选择了：{{selected.number}}/p/div

js:

var app3=new Vue({ el: '#app3 '，data : { selected : ' ' })；

效果：

当选中某个选择权时，app3.selected为对象，所以选定的号码即为：值定义的绑定值。

以上示例演示