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就除外。
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤–>