大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天就跟大家聊聊有关Vue中怎么实现表单绑定,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
专注于为中小企业提供成都做网站、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业登封免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
基础用法
可以用 v-model 指令在表单 及
注:
1.v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
2.对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。
输入框
案例1
Vue 测试实例 - 输入框 input 元素:{{ message }}
textarea 元素:{{ message2 }}
复选框
可以结合计算属性,输出自己想要的效果。
案例2:
Vue 测试实例 - 复选框 单个复选框:
多个复选框:
选择的值为: {{ checkedNames }}
单选按钮
以下实例中演示了单选按钮的双向数据绑定:
案例3
Vue 测试实例 - 单选按钮
你喜欢: {{ finalChose }}({{picked}})
select 列表
以下实例中演示了下拉列表的双向数据绑定:
案例4
Vue 测试实例 - select 列表 选择的水果是: {{selected}}
用 v-for 渲染的动态选项:
Vue 测试实例 - select 列表 选择的水果是: {{selected}}