(尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)
自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了
1.使用v-model对表单数据自动收集
1)text/textare----单行/多行输入框
2)checkbox----多选
3)radio----单选
4)select----下拉框
2.
3.test012.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="demo"> <!--.prevent阻止默认行为--> <form action="/xxx" @submit.prevent="handleSubmit"> <span>用户名:</span> <input type="text" v-model="username"><br> <span>密码:</span> <input type="password" v-model="pwd"><br> <span>性别:</span><!--value="女"希望女被选中--> <input type="radio" id="female" value="女" v-model="sex"> <label for="female">女</label> <input type="radio" id="male" value="男" v-model="sex"> <label for="male">男</label><br> <span>爱好:</span> <input type="checkbox" id="basket" value="basket" v-model="likes"> <label for="basket">篮球</label> <input type="checkbox" id="football" value="foot" v-model="likes"> <label for="football">足球</label> <input type="checkbox" id="golf" value="golf" v-model="likes"> <label for="golf">高尔夫</label> <input type="checkbox" id="vollay" value="vollay" v-model="likes"> <label for="vollate">排球</label><br> <span>城市:</span> <select v-model="cityId"> <option value="">未选择</option><!--最终提交过去的是id,所以value="city.id",因为city.id是文本,故写成:value--> <option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option> </select><br> <span>介绍:</span> <textarea rows="10" v-model="description"></textarea><br><br> <input type="submit" value="注册"> </form></div><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript"> new Vue({ el:‘#demo‘, data:{ username: ‘‘, pwd:‘‘, //女是跟value的值匹配 sex:‘女‘,//多选应该是数组 likes:[‘foot‘], allCitys: [{id:1,name:‘BJ‘},{id:2,name:‘SH‘},{id:3,name:‘GD‘}], cityId: ‘3‘, description:‘‘ }, methods:{ handleSubmit(){ console.log(this.username,this.pwd,this.sex,this.likes,this.cityId,this.description) } } })</script></body></html>4.点击submit可以通过console控制台看到提交的数据;也可以通过vue来查看 相关推荐
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
yuzhu 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04
softwear 2020-08-21