好资源导航 » 文章资讯 » 详解vue表单——小白速看

详解vue表单——小白速看

2023-09-14 10:18:05 65

一、基本用法

你可以用v-model指令在表单及元素上创建双向数据绑定。 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。 一组代码，看完text、textarea、radio、checkbox、select的基本用法： <pre> <divid="app7"> <inputtype="text"v-model="message"><label>{{message}}</label> <textareav-model="message1">{{message1}}
单选按钮
男女
跑步爬山滑雪
请选择 javascript {{option.text}}

varapp7=newVue({ el:'#app7', data:{ message:'单行文本', message1:'多行文本', picked:true, sex:'boy', hobby:['爬山','滑雪'], select:'css', selected:'A', options:[ {text:'One',value:'A'}, {text:'Two',value:'B'}, {text:'Three',value:'C'} ] } });

二、值绑定

单选按钮、复选框和选择列表在单独使用或单选的模式下，v-model绑定的值是一个静态字符串或布尔值，但在业务中，有时需要绑定一个动态的数据，这时可以用v-bind来实现。

一组代码，看完表单常用radio、checkbox、select的值绑定：




单选按钮
{{picked}}
{{value}}



复选框
{{toggle}}
{{value1}}
{{value2}}



123

{{selected.number}}

varapp8=newVue({ el:'#app8', data:{ picked:false, value:'boy', toggle:false, value1:'a', value2:'b', selected:'' } });

三、修饰符

与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

一组代码，看完常用修饰符lazy、number、trim




{{message}}


{{typeofnumber}}


{{text}}

varapp9=newVue({ el:'#app9', data:{ message:'', number:'', text:'' } });

总结

以上所述是小编给大家介绍的vue表单详解——小白速看，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

详解vue表单——小白速看

热门推荐

随机推荐