Vuejs分析和Vuejs第6章中的表单元素示例

本文是一篇结合官方文档的比较详细代码的详细教程，非常适合初学者学习。感兴趣的朋友应该看看！

信息来自官方文件：

http://cn.vuejs.org/guide/forms.html

表单绑定

常见的绑定方法：

[1]文本输入框的绑定；

[2] TextArea绑定(类似于[1])；

[3]单选选定值绑定；

[4]复选框绑定(自动绑定不带名称的数组)；

[5]选择绑定；

[6]选择多个选择框绑定；

[7]动态绑定(以上不同类型但相同值可以交互)；

[8]复选框选中和未选中给出不同的值(主要针对未选中状态)；

[9]复选框、单选，选择动态绑定所选状态的值(主要指vm实例的动态绑定对象或属性，如数据中的属性或计算值)；

例如代码：

div id='app '输入类型=' text ' v-model=' text '/div { { text } }/div div ——33543543543——3333——/div文本区域样式=' width :200px'height :100 px ' v-model=' text area '/text area div { { text area } }/div div ——335435433543354335433——/div标签输入类型=' checkbox ' v-model=' checkbox '/左边选中右边则为true:{ { checkbox } }/label div ——35433543543354335435435433543354/div label输入类型=' checkbox '值=' first checkbox ' v-model=' checkbox ' first checkbox/label br/label输入类型=' checkbox '值=' secondCheckbox ' v-model=' checkbox '以上选中的价值情况为：{ {复选框}}/div div以上选中的价值情况为（以json格式显示，这里使用了json过滤器):{ { checks | JSON } }/div div ——3354335435435433543354335433543——/div标签输入类型='收音机'值=' A ' v型='收音机'/值=A/labelbr标签输入类型='收音机'值=' B ' v-model=' radio '/值=B/labelbr div{{radio}}/div注意，这里的v型的值应该被注册到数据里面，否则会红字警告（事实上，所有的都应该也这么做)/div ————3543543——354354——335435433543543——/div选择v型='选择'选项默认值，选项不设值/选项选项值='B '值的值设为b/选项选项选择值='C '默认选择这个，值设为c/option/select div { { select } }/div同样，这里不注册也会被报错/div ——3——354354——335433543354335435433543——/div以下是挑选的多选，按住计算机的计算机的ctrl按键按键可以连续选，按住变化选择区间/div select style=' width :200 px； 高度' :100像素；隐藏飞越：v型='多重'多重选项值=' A ' A/选项值=' B ' B/选项值=' C ' C/选项值=' D ' D/选项值=' E ' E/选项/选择差异多选选中的值是：{{multiple}}/div注意，这个多选挑选框是默认带y轴的滚动条的/div ——3——354354——335433543354335435433543——/div动态渲染，复选框和多选挑选框是互相影响的/div标签输入类型=“复选框”值=' A ' v型='动态' A/标签br/标签输入类型='复选框'值=' B ' v型='动态' B/标签br/标签输入类型='复选框'值=' C ' v-model=' Dynamic ' C/label br/select style=' width 3360200 px；高度：100 px飞越：隐藏；v型='动态'多选项值=' A ' A/选项选项值=' B ' B/选项选项值=' C ' C/选项/选择差异选中情况是：{ { Dynamic } }/div ——33543————33543354354354335435435433543——/div选中和选中的值自定义的checkbox/div标签输入类型=' checkbox ' v-bind : true-value=' different values。t ' v-bind : false-value=' differentvalues。f ' v-model=' distinct ' true/false/label br/div dive值： { { distinct } }/div注意，以上不能像普通检验盒那么样，用一个数组作为多个检验盒的v型的变量，且其值是绑定与伏特计实例的某个属性；因此，不能在垂直装订里的值是一个字符串，但可以是一个对象，例如{a:1}这样（当然，这个时候显示的值也是一个对象了)/div ————354354——35354335433543543543543333——/div自定义之的无线电/div标签输入类型=' radio ' v-bind :值=' text ' v-model=' customize '/值为1/标签标签输入类型=' radio ' v-bind :值=' text area ' v-model=' customize '/值为1/标签分区{ {自定义} }/分区分区同样，值可以是伏特计的一个属性或者是一个对象，另外，同样有效的还有选择。（主要就这三个有选中状态，除此之外虽然例如日期类型也有选中，但是意义不大)/div ————354354——35435435433543543543——/div/div脚本var vm=new Vue({ el: '#app '，data: { text: '默认有输入内容，textarea: '这里是多行文字\n第二行，\\n是换行符，但在字符串里显示为空格，复选框：[]，radio: ' '，select: ' '，multiple: ' '，Dynamic: {}，different: ' '，different : { t : ' true '，f: 'false' }，customize : ' ' })/script添加参数：

【1】懒惰

取消焦点状态后更新值，而不是在按键时更新值。

对文本输入框和文本区域都有效

例如代码：

输入类型=' text ' v-model=' text ' lazy/div { { text } }/div【2】数字

自动将输入值转换为数字类型，转换后如果是NaN类型则返回原值；

例如代码：

输入类型=' text ' v-model=' text ' number/div { { text } }/div { { type of text } }/div如果添加参数编号，输入编号时提示类型为字符串，添加后，编号类型会由纯数字提示。

[3]去抖=“毫秒数”

当值在几毫秒内没有变化时，触发变量值的变化；

例如代码：

输入类型=' text' v-model=' text '去抖=' 1000'/div {{text}}/div当我以500ms的时间差依次输入6个数字1、2、3、4、5、6时，文本的值不会更新；

当我停止输入1000毫秒时，文本值将被更新。

因此，它适合像ajax这样的高消耗操作。

以上是边肖介绍的Vuejs第六章中对Vuejs和表单元素的实例分析，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！