189 8069 5689

Vue中怎么实现表单绑定-创新互联

今天就跟大家聊聊有关Vue中怎么实现表单绑定，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

成都创新互联公司是一家专业提供休宁县企业网站建设,专注与网站设计、成都做网站、HTML5建站、小程序制作等业务。10年已为休宁县众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

基础用法

可以用 v-model 指令在表单 及

 

Vue中怎么实现表单绑定

复选框

可以结合计算属性，输出自己想要的效果。

案例2：





Vue 测试实例 - 复选框




 
单个复选框：

 
 {{ isClick }}
	
 
多个复选框：

 
 Baidu
 
 Google
 
 taobao
 

 选择的值为: {{ checkedNames }}
   

Vue中怎么实现表单绑定

单选按钮

以下实例中演示了单选按钮的双向数据绑定：

案例3





Vue 测试实例 - 单选按钮




 
 男人
 

 
 女人
 

 你喜欢: {{ finalChose }}（{{picked}}）
 

Vue中怎么实现表单绑定

select 列表

以下实例中演示了下拉列表的双向数据绑定：

案例4





Vue 测试实例 - select 列表




 
 选择一种水果
 香蕉
 苹果
 
 
 
 选择的水果是: {{selected}}
 

 

Vue中怎么实现表单绑定

用 v-for 渲染的动态选项：


Vue 测试实例 - select 列表




 
 
 {{option.text}}
 
 
 
 
 选择的水果是: {{selected}}
 

 

Vue中怎么实现表单绑定

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

看完上述内容，你们对Vue中怎么实现表单绑定有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


当前名称：Vue中怎么实现表单绑定-创新互联
分享链接：http://jkwzsj.com/article/ccihdi.html

其他资讯