表单
radio 单选框
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>欢迎来到背景大学，您选择的专业是:{
{major}}</h1>
<!-- 通过 v-model 进行双向数据绑定 获得到用户选择的value值 -->
web: <input type="radio" value="wed" name="course" v-model="major">
UI: <input type="radio" value="UI" name="course" v-model="major">
python: <input type="radio" value="python" name="course" v-model="major">
</div>
<script>
let app = new Vue({
el: "#app",
data: {
major: ""
}
})
</script>
</body>
</html>
checkbox 复选框
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
您的爱好有:
<ul>
<li v-for="item in hobbys">{
{item}}</li>
</ul>
<!-- v-modeol 和复选框进行双向数据绑定,将多个获得的多个value值存放到一个数组中 -->
唱歌：<input type="checkbox" value="唱歌" v-model="hobbys">
跳舞：<input type="checkbox" value="跳舞" v-model="hobbys">
打篮球：<input type="checkbox" value="打篮球" v-model="hobbys">
</div>
<script>
let app = new Vue({
el: "#app",
data: {
hobbys: []
}
})
</script>
</body>
</html>
selece
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">6
<h1>您选择的学科为:{
{myCourse}}</h1>
<!-- 通过 v-model 进行双向数据绑定 获得到用户选择的值 -->
<select v-model="myCourse">
<option v-for="item in courses" :value="item">{
{item}}</option>
</select>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
myCourse: "",
courses: ["python", "java", "web", "go"]
}
})
</script>
</body>
</html>
收集表单数据小结
收集表单数据：
若：<input type="text"/> 文本输入框
则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/> 单选框
则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/> 复选框
- 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- 配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） (2)v-model的初始值是数组，那么收集的的就是value组成的数组
案例代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>收集表单数据</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
</html>
表单修饰符
v-model的三个修饰符
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
v-model 通过双向数据绑定获得的input框的值是字符串类型的
- trim：输入首尾空格过滤
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number</title>
<script src="vue.js"></script>
</head>
<body bgcolor="pink">
<div id="app">
<!-- number: 将 value 转为数字型 -->
<h1>{
{ count + 1}}</h1>
<input type="text" v-model.number="count">
<hr>
<!-- lazy: 失去焦点后 获得 value -->
<h1>{
{msg}}</h1>
<input type="text" v-model.lazy="msg">
<hr>
<!-- trim: 可以去掉字符串的首尾空格 -->
<input type="text" v-model.trim="tem">
</div>
<script>
let app = new Vue({
el: "#app",
data: {
count: 0,
msg: "",
tem: ""
}
})
</script>
</body>
</html>
效果图示
谢谢款待
