文章目录
- 1、Vue中实现表单数据的收集
-
- 1.1 基础知识
- 1.2 代码实例
- 1.3 测试效果
- 1.4 额外插一嘴
1、Vue中实现表单数据的收集
1.1 基础知识
表单中常用的标签：input(输入框)、radio(单选框)、checkbox(多选框)、select(下拉列表)、textarea(文本域)、button(按钮)
收集表单数据：
- 若：
<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-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）(2)、v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤
1.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<form @submit.prevent="submit">
账号：<input type="text" v-model.trim="UserInfo.account" /><br /><br />
姓名：<input type="text" v-model="UserInfo.name"><br /><br />
密码：<input type="password" v-mode="UserInfo.password"><br /><br />
年龄: <input type="number" v-mode="UserInfo.age"><br /><br />
性别：
男<input type="radio" name='sex' v-model="UserInfo.sex" value="man">
女 <input type="radio" name="sex" v-model="UserInfo.sex" value="female">
爱好：
学习:<input type="checkbox" v-model="UserInfo.hobby" value="study">
打游戏:<input type="checkbox" v-model="UserInfo.hobby" value="playgame">
干饭：<input type="checkbox" v-model="UserInfo.hobby" value="eat"> <br /><br />
所在城市:
<select v-model="UserInfo.city">
<option value="">请选择城市</option>
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="zhengzhou">郑州</option>
</select>
<br /><br />
备注：
<textarea v-model="UserInfo.other"></textarea><br /><br />
<input type="checkbox" v-model="UserInfo.agree">阅读并接收<a href="http://www.baidu.com"></a>
<button>提交</button>
</form>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue",
UserInfo: {
account: '',
name: '',
password: '',
age: 18,
sex: 'man',
hobby: [],
city: 'shanghai',
other: '',
agree: ''
}
},
methods: {
submit() {
console.log(JSON.stringify(this.UserInfo))
}
},
})
</script>
</body>
</html>
1.3 测试效果
1.4 额外插一嘴
- 样式的设计可以引入外部css（方便管理）
- 输入框的验证规则可以单独写一个js文件（方便管理）
- 可以使用elementui、Bootstrap、layui(layui我觉得不好用)等框架进行页面的快速设计
