<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./vue.js"></script>
<style type="text/css">
label {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
</style>
</head>
<body>
<div id="root">
<!-- prevent阻止表单提交默认行为(跳转页面) -->
<form @submit.prevent="demo">
<label for="account">账号:</label>
<!-- trim去除两边空格 -->
<input type="text" v-model.trim="account" id="account" />
<br><br>
<label for="password">密码:</label>
<input type="password" v-model="password" id="password" />
<br><br>
<label for="age">年龄:</label>
<!-- v-model.number将字符串转为数值 -->
<input type="number" v-model.number="age" id="age" />
<br><br>
性别:
<input type="radio" v-model="sex" value="男" id="man" name="sex" />
<label for="man">男</label>
<input value="女" v-model="sex" style="margin-left: 20px;" type="radio" id="lady" name="sex" />
<label for="lady">女</label>
<br><br>
爱好:
<input type="checkbox" v-model="hobby" value="学习" id="study" />
<label for="study">学习</label>
<input type="checkbox" v-model="hobby" value="打游戏" id="play_game" />
<label for="play_game">打游戏</label>
<input type="checkbox" v-model="hobby" value="吃饭" id="eat" />
<label for="eat">吃饭</label>
<br><br>
所选校区
<select v-model="city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="wuhan">武汉</option>
</select>
<br><br>
其他信息:
<!-- v-model.lazy失去焦点时收集数据 -->
<textarea v-model.lazy="other" ></textarea>
<br><br>
<input v-model="agree" type="checkbox">阅读并接受<a href="https://www.baidu.com/">《用户协议》</a>
<button type="submit">提交</button>
</form>
</div>
</body>
</html>
<script type="text/javascript">
const userInfo = {
account: '',
password: '',
sex: '男',
age: 19,
hobby: [],
city: 'beijing',
other: '',
agree: false
};
const vm = new Vue({
el: '#root',
data: function() {
return userInfo;
},
methods: {
demo() {
console.log(JSON.stringify(userInfo));
}
}
});
</script>
0
点赞
收藏
分享
29.Vue训练v_model收集表单数据
相关推荐
0 条评论
