VUE五世型表单数据双向绑定完整示例

本文实例讲述了VUE五世型表单数据双向绑定。分享给大家供大家参考，具体如下：

！DOCTYPE html html htmlownerta charset=' utf-8 ' title vue v-model双向绑定/title脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script/headdydiv id=' app ' text area v-model=' message ' place holer='请在此输入文字/text area span { { message } }/span/br输入类型=' text ' v-model=' data。名称/跨度姓名：{{data.name}}/span /br输入类型='radio' id='boy' value='男v-model='data.gender'/标签为='男孩'男/标签输入类型='radio' id='girl' value='女v-model='data.gender'/标签为='女孩'女/label span { { data }。性别} }/span br/输入类型=' checkbox ' id=' item 1 '值='阅读v-model=' data。='项目1 '的利息'/标签阅读/标签输入类型='checkbox' id='item2 '值='打球v-model=' data。='项目2 '的利息'/标签打球/标签输入类型='checkbox' id='item3 '值='体操v-model=' data。“=”复选框的利息/标签体操/label br/span { { data }。兴趣} }/span选择v-model='data.identity '选项值='java '选择了java选项选项值=' web ' web/选项选项值=' HR ' HR/选项/选择范围身份：{{data.identity}}/span！-选择：用迭代渲染的动态选项：-在选项" v-bind:value="选项中选择v-model="selected "选项v-for="选项。值="选项。值" { option。text } }/option/select span selected : { { selected } }/span/div script new Vue({ El : ' # app '，data: { message: '6 '，data: { name: ' '，gender: ' '，interest 3:[]，identity这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，可得如下运行结果：

希望本文所述对大家vue.js程序设计有所帮助。