vue的表单收集案例-编程知识

vue的表单收集案例

Vue的表单收集案例

这只是最基础的表单收集，并未涉及到element-ui。

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>收集表单数据</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><!-- 这里可以设置action属性就是指定表单提交的地址 --><form @submit.prevent="demo"> 账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>密码：<input type="password" v-model="userInfo.password"> <br/><br/><!-- 注意输入age需要使用.number转化为数字 -->年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>性别：<!-- 单选框 需要使用name属性表示他们是一组，不然没有单选效果-->男<input type="radio" name="sex" v-model="userInfo.sex" value="male">  女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/><!-- 多选框 ，因为可以有多个值，所以hobby是一个数组 -->爱好：学习<input type="checkbox" v-model="userInfo.hobby" value="study">打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br/><br/><!-- 下拉列表 -->所属校区<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">武汉</option></select><br/><br/>其他信息：<!--这里使用了懒加载，只有在失去焦点的一瞬间才会进行收集 --><textarea v-model.lazy="userInfo.other"></textarea> <br/><br/><!-- 这里虽然也是多选框，但是它的值只有勾选，未勾选，true和false，所以就不需要value属性 --><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a><!-- 表单按钮默认会进行提交操作，进行页面跳转，不需要的话可以阻止事件的默认行为 --><button>提交</button></form></div></body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{userInfo:{account:'',password:'',age:18,sex:'female',hobby:[],city:'beijing',other:'',agree:''}},methods: {demo(){//把收集到的表单数据转为json格式console.log(JSON.stringify(this.userInfo))}}})</script>
</html>

收集表单数据：

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，单选框则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/> 多选框
1.没有配置input的value属性，那么收集的就是true（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是true（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value值组成的数组。

总结：就是不能用户输入的除了v-module都会多加一个value属性 ,但是也有只需要true和false的checkbox就除外。