(尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)
Posted curedfisher
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了(尚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来查看
以上是关于(尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)的主要内容，如果未能解决你的问题，请参考以下文章