前端基础之收集表单数据

实例表单

<!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 type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->

</head>

<body>

<div id="root">

<form @submit.prevent="demo">

账号: <input type="text" v-model.trim="userInfo.account"><br>

密码: <input type="password" v-model="userInfo.password"><br>

性别:

男:<input type="radio" name="sex" v-model="userInfo.sex" value="male">

女:<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br>

年龄:<input type="number" name="age" v-model.number="userInfo.age" ><br>

爱好:

学习: <input type="checkbox" v-model="userInfo.hobby" value="stude">

打游戏: <input type="checkbox" v-model="userInfo.hobby" value="game">

吃饭: <input type="checkbox" v-model="userInfo.hobby" value="eat"><br>

所属校区

<select v-model="userInfo.city">

<option value="">请选择校区</option>

<option value="beijin">北京</option>

<option value="shanghai">上海</option>

<option value="shenzhen">深圳</option>

<option value="wuhan">武汉</option>

</select><br><br>

其他信息:

<textarea v-model.lazy="userInfo.other"></textarea><br>

<input type="checkbox" v-model="userInfo.agree"> 阅读并接收<a href="http://atguigu.com">《用户协议》</a>

<button>提交</button>

</form>

</div>

<script type="text/javascript">

new Vue({

el:'#root',

data:{

userInfo:{

account:'',

password:'',

sex:'female',

hobby:[],

age:'',

city:'',

other:'',

agree:''

}

},

methods: {

demo(){

console.log(JSON.stringify(this._data))

}

}

})

</script>

</body>

</html>

v-model的修饰符:

lazy失去焦点之后再收集数据

number:仅能输入数字

trim:去掉前后输入的空格

相关推荐
前端小巷子5 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑8 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了9 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆15 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆20 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan23 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程32 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员