12_表单数据
收集表单数据
当<input type="text"/>，则v-model收集的是value值,用户输入的就是value值。
当<input type="radio"/>，则v-model收集的是value值,且要给标签配置value值。
当<input type="checkbox"/>：
-
没有配置input的value属性,那么收集的就是checked(勾选or 未勾选,是布尔值)
-
配置input的value属性:
-
v-model的初始值是非数组,那么收集的就是checked(勾选or 未勾选,是布尔值)
-
v-model的初始值是数组，那么收集的的就是value组成的数组
-
v-model的三个修饰符：
.lazy：失去焦点再收集数据
.number：输入字符串转为有效的数字
.trim：输入首尾空格过滤
案例
<body>
<div id="app">
<!-- .prevent 修饰符阻止浏览器默认事件 -->
<form @submit.prevent="submit">
<label for="account">账号：</label>
<!-- .trim 过滤掉输入内容的前后空格 -->
<input type="text" id="account" v-model.trim="userInfo.account" />
<br />
<br />
<label for="password">密码：</label>
<input type="password" id="password" v-model="userInfo.password" />
<br />
<br />
<label for="age">年龄：</label>
<!-- .number 将输入的字符串转为有效的数字 -->
<input type="number" id="age" v-model.number="userInfo.age" />
<br />
<br />
性别：
<label for="male">男</label>
<input type="radio" id="male" v-model="userInfo.gender" value="男" />
<label for="female">女</label>
<input type="radio" id="female" v-model="userInfo.gender" value="女" />
<br />
<br />
爱好：
<label for="eat">吃饭</label>
<input type="checkbox" id="eat" v-model="userInfo.hobby" value="吃饭" />
<label for="drink">喝水</label>
<input type="checkbox" id="drink" v-model="userInfo.hobby" value="喝水" />
<label for="sleep">睡觉</label>
<input type="checkbox" id="sleep" v-model="userInfo.hobby" value="睡觉" />
<br />
<br />
地址：
<select v-model="userInfo.city">
<option value="">家庭住址</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
<br />
<br />
简介：
<!-- .lazy 框失去焦点再收集数据 -->
<textarea v-model.lazy="userInfo.description"></textarea>
<br />
<br />
<button>提交</button>
</form>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
userInfo: {
account: '',
password: '',
age: '',
gender: '',
hobby: [],
city: '',
description: '',
},
};
},
methods: {
submit() {
// console.log(this.userInfo);
console.log(JSON.stringify(this.userInfo));
},
},
});
</script>
</body>
阅读剩余
THE END
