|
跟着视频学Vue，记录一些笔记~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- @submit.prevent阻止form表单的默认提交 -->
<form @submit.prevent="demo">
<!-- label标签的for选项可以使用户名和输入框联系起来 -->
<label for="account">用户名：</label>
<!-- v-model.trim表示去掉用户名前后的空格 -->
<input type="text" v-model.trim="userInfo.account" id="account">
<br><br>
密码：<input type="password" v-model="userInfo.password">
<br><br>
<!-- 年龄type="number"只准输入数字 v-model.number表示输入的数据类型为number类型 -->
年龄：<input type="number" v-model.number="userInfo.age">
<br><br>
性别：<input type="radio" name="sex" value="male" v-model="userInfo.sex">男
<input type="radio" name="sex" value="female" v-model="userInfo.sex">女
<br><br>
爱好：
<input type="checkbox" value="study" v-model="userInfo.hobby">学习
<input type="checkbox" value="eat" v-model="userInfo.hobby">吃饭
<input type="checkbox" value="play" v-model="userInfo.hobby">玩耍
<br><br>
校区：
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="wuhan">武汉</option>
<option value="shenzhen">深圳</option>
</select>
<br><br>
其他信息：
<!-- v-model.lazy表示不是实时收集，而是失去焦点的时候收集数据 -->
<textarea v-model.lazy="userInfo.other"></textarea><br><br>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
<script>
new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
age: 18,
sex: '',
hobby: [], //多选框用数组搜集
city: 'beijing',
other: '',
agree: ''
}
},
methods: {
demo() {
// console.log(JSON.stringify(this._data)) //一般不直接获取_data属性，所以可以在外面包裹一层userInfo
console.log(JSON.stringify(this.userInfo))
},
},
});
</script>
</body>
</html>
收集表单数据：
1、若：input类型为text， <input?type="text" >，则v-model收集的是value值，用户输入的就是value值。
2、若：input类型为radio，<input?type="radio"?name="sex"?value="male"?v-model="userInfo.sex">，则v-model收集的是value值，且要手动配置value值。
3、若：input类型为checkbox，<input?type="checkbox"?value="study"?v-model="userInfo.hobby">
（1）没有配置input的value属性，那么收集的就是checked（勾选或者未勾选，是布尔值）
（2）配置了input的value属性：
a、v-model的初始值不是数组，那么收集的就是checked（勾选或者未勾选，是布尔值）
b、v-model的初始值是数组，那么收集的就是value值组成的数组（多选常用）
4、textarea多行文本输入，v-model收集的是输入的值，与lazy修饰符一同使用
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据；
number：输入字符串转为数字类型
trim：去掉输入首尾空格
|