Vue技术13收集表单数据
2023-09-27 14:26:24 时间
<!DOCTYPE html>>
<html>
<head>
<mata charset="UTF-8"/>
<title>收集表单数据</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
收集表单数据:
若:<input type="text"/>,则v-model收集的是value的值,用户输入的就是value值。
若:<input type="radio"/>,则v-model手机的是value的值,且要给标签配置value值。
若:<input type="checkbox"/>,
1.没有配置input的value属性,那么收集的就是checked(勾选or未勾选,是布尔值)
2.配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选or未勾选。是布尔值)
(2)v-model的初始值是数组,那么收集的就是value组成的数组
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入收尾空格过滤
-->
<!-- 准备好一个容器 -->
<div id="root">
<form @submit.prevent="demo">
<label for="demo">账号:</label>
<input type="text" v-model.trim="userInfo.account" id="demo"><br/><br/>
密码:<input type="current-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>
<br/><br/>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:'',
sex:'',
hobby:[],
city:'',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
},
})
</script>
</html>
相关文章
- 前端技术栈-ES6、Vue、ElementUI,以及Vue脚手架快速构建前端项目
- 【转】vue项目重构技术要点和总结
- 精品微信小程序二手交易小程序+后台管理系统|前后分离VUE
- vue.js:子组件访问父组件parent-root笔记
- vue中鼠标事件
- 改变其他vue对象里面的信息
- Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑记(中)
- vue-cli2.0/3.0/4.0创建项目的方式差异解读和vue-cli4.0打包命令和环境配置
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
- Vue技术19单文件组件
- Vue技术18.4 VueComponent
- Vue技术18.2几个注意点
- Vue技术15.4v-once指令
- Vue技术15.2v-text 指令
- Vue技术10.绑定样式
- Vue技术9.5姓名案例_watch实现
- Vue技术8.2姓名案例_methods实现
- Vue技术6.1回顾Object.defineproperty方法
- Vue技术4.el与data的两种写法
- Vue技术3.数据绑定
- vue中使用viewerjs
- vue 上传图片到阿里云(前端直传:不推荐)
- vue 项目添加vue-router
- vue.js移动端app实战4:上拉加载以及下拉刷新
- 使用 Vuex + Vue.js 构建单页应用
- vue.js教程
- vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航