vue 收集表单数据 （有错误的请各位大佬指点）
收集表单数据:
若: <input type="text"/>, 则v-model收集 的是value值，用户输入的就是value值。
若: <input type= "radio"/>,则v-model收 集的是value值，且要给标签配置value值。
若: <input type=" checkbox"/>
1.没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)
2.配置input的value属性:
(1 )v-mode1的初始值是非数组，那么收集的就是checked (勾选or未勾选，是布尔值)
(2)v-mode1的初始值是数组，那么收集的的就是value组成的数组
备注: v-mode1的三 个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Each snowflake is a letter from the sky.
每片雪花都是天空的一封来信。 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue收集表单数据</title>
<!-- 引用vue文件 -->
<script type="text/javascript" src="../study01/js/vue.js"></script>
<!-- css 样式 -->
<style>
#root{
margin:0 auto;
width: 1100px;
height: 700px;
border: 1px solid black;
}
#root form{
margin-left: 250px;
}
h1{
text-align: center;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<!-- 收集表单数据:
若: <input type="text"/>, 则v-model收集 的是value值，用户输入的就是value值。
若: <input type= "radio"/>,则v-model收 集的是value值，且要给标签配置value值。
若: <input type=" checkbox"/>
1.没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)
2.配置input的value属性:
(1 )v-mode1的初始值是非数组，那么收集的就是checked (勾选or未勾选，是布尔值)
(2)v-mode1的初始值是数组，那么收集的的就是value组成的数组
备注: v-mode1的三 个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤 -->
<div id="root">
<h1>杰然学生表册</h1>
<!-- 表单提交控制台 @submit.prevent="demoput"-->
<form @submit.prevent="demoput">
<!-- 交互表单 label -->
<label for="useName">账号：</label>
<!-- v-model.trim trim 去掉前后输入的空格-->
<input type="text" id="useName" v-model.trim="userInfo.useName"> <br /><br />
<label for="passName">密码：</label>
<input type="password" id="passName" v-model="userInfo.passName"> <br /><br/>
<label for="passName">年龄：</label>
<!-- v-model 也是有修饰符 年龄防止提交到数据库为字符串报错 去除引号-->
<input type="number" id="age" v-model.number="userInfo.age"> <br /><br/>
<!-- 性别单选框 -->
<label for="checkbox01">性别：</label>
<label for="man"> 男</label>
<input type="radio" id="man" name="sex" value="male"
v-model="userInfo.sex" />
<label for="woman">女</label>
<input type="radio" id="woman" name="sex" value="female"
v-model="userInfo.sex" /><br/><br />
<!-- 爱好 多选框 -->
<span>爱好：</span>
<label for="basketball">篮球</label>
<input type="checkbox" id="basketball" v-model="userInfo.habby" value="basketball">
<label for="football">足球</label>
<input type="checkbox" id="football"v-model="userInfo.habby" value="football">
<label for="game">打游戏</label>
<input type="checkbox" id="game"v-model="userInfo.habby" value="game"><br/><br />
<!-- 校区 下拉框 -->
<span>所属校区：</span>
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="yunnan">云南</option>
<option value="zhaotong">昭通</option>
<option value="lijiang">丽江</option>
<option value="wenshan">文山</option>
<option value="chengjiang">澄江</option>
</select><br/><br />
<!-- 更多信息 多行文本框 -->
<span>更多信息</span>
<!-- v-model.lazy 修饰符 在失去焦点的一瞬间才收集 -->
<textarea cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br/><br />
<input type="checkbox" v-model="userInfo.sgree"> 我也阅读和接收
<a href="www.baidu.com">《用户协议》</a><br/><br />
<button>提交数据</button>
</form>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止运行时提示开发版本
new Vue({
el:"#root",
data:{
// userInfo 管理用户信息
userInfo:{
useName:'',
passName:'',
age,
sex:'male',
habby:[], // habby 初始值可以影响v-moddel的初始值 复选框可以写成数组形式[]
city:"",
other:'',
sgree:''
}
},
methods:{
demoput(){
// 提交表单信息到控制台 userInfo直接换成_data也可以
console.log(JSON.stringify(this.userInfo))
}
},
})
</script>
</body>
</html>
