位置: IT常识 - 正文

Vue｜获取表单数据(vue获取value值)

编辑：rootadmin

Vue｜获取表单数据

推荐整理分享Vue｜获取表单数据(vue获取value值)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue获取数据axios,vue获取指定元素,vue读取excel表格数据,vue获取index,vue获取数据,vue怎么获取数据库数据,vue读取excel表格数据,vue获取table的行数,内容如对您有帮助，希望把文章链接给更多的朋友！

表单用于搜集不同类型的用户输入，Vue针对不同的表单输入类型，也提供了不同的的输入控制及验证。精彩专栏持续更新↓↓↓ 微信小程序实战开发专栏

一、获取表单数据1.1 input1.2 radio1.3 checkbox1.4 select1.5 textarea1.6 表单提交1.7 表单修饰符number修饰符lazy修饰符trim修饰符一、获取表单数据

开始前的准备，在目录下创建文件夹及对应的页面如下

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>收集表单数据</title> <script src="../js/vue.js" type="text/javascript"></script></head><body>  <div id="root"> </div> <script type="text/javascript"> //Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 // 创建vue实例 const vm = new Vue({ el:'#root', //函数式 data:function(){ return{ info:{ name:'摔跤猫子', } }; } }); </script></body></html>1.1 input

默认类型的input框通过前面几章所介绍的v-model双向绑定即可

这里再插一个小技巧，当表单的内容为左侧标题及右侧文本框这样的布局组成时，如何实现点击标题光标自动在右侧的文本框选中呢?

只需要在左侧标题的label标签中添加一个for的同时指定一个名称，同时在需要选中光标的文本框设置相同的id值即可

<label for="number">学号:</label><input type="text" v-model="number" id="number" autocomplete="off" />1.2 radio

在使用radio标签时，需要给input指定其type为radio的同时添加一样的name值，否则无法达到多选一的效果

radio标签继续使用v-model双向绑定，但是切换时data中的sex字段并没有数据，这是因为radio类型下的input没有一个入口用于输入，必须给它指定默认的value值

相同的name值以及value值配置好后，即可实现效果

性别:男<input type="radio" v-model="sex" name="sex" value="男" />女<input type="radio" v-model="sex" name="sex" value="女" />1.3 checkbox

使用checkbox时是不是跟上述一样的步骤呢?毕竟用的都是input标签，只不过修改了其type值而已。

年级:一年级<input type="checkbox" value="一年级" v-model="grade" />二年级<input type="checkbox" value="二年级" v-model="grade" />三年级<input type="checkbox" value="三年级" v-model="grade" />

梦想是美好的，现实是残酷的，checkbox标签的表现让我们大失所望，不仅获取到的数据类型不对，而且不管是点击三个中的哪一个，他都是一起选中，一起取消，仿佛一个共同体