大家可以用 v-model 指令在表单控件元素上创建双向数据绑定。这篇文章主要介绍了vue表单详解,需要的朋友可以参考下
一、基本用法
你可以用 v-model 指令在表单 及
但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
立即学习“前端免费学习笔记（深入）”；
一组代码，看完text、textarea、radio、checkbox、select的基本用法：
请选择 html javascript css {{option.text}}
var app7 = new Vue({ 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}} var app8 = new Vue({ el: '#app8', data:{ picked: false, value: 'boy', toggle: false, value1: 'a', value2: 'b', selected: '' }});
登录后复制
三、修饰符
与事件的修饰符类似， v-model 也有修饰符，用于控制数据同步的时机。
一组代码，看完常用修饰符lazy、number、trim
{{message}}
{{typeof number}}
{{text}}
var app9 = new Vue({ el: '#app9', data:{ message: '', number: '', text: '' }});
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Ajax中浏览器和服务器交互详解
零基础学习AJAX之AJAX框架
零基础学习AJAX之制作自动校验的表单
以上就是详解vue表单的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2756698.html
