Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
文章目录
- 1、Vue中实现表单数据的收集
-
- 1.1 基础知识
- 1.2 代码实例
- 1.3 测试效果
- 1.4 额外插一嘴
1、Vue中实现表单数据的收集
1.1 基础知识
表单中常用的标签:input(输入框)、radio(单选框)、checkbox(多选框)、select(下拉列表)、textarea(文本域)、button(按钮)
收集表单数据:
- 若:
,则v-model收集的是value值,用户输入的就是value值。<input type="text"/>
- 若:
,则v-model收集的是value值,且要给标签配置value值。<input type="radio"/>
- 若:
<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我觉得不好用)等框架进行页面的快速设计