2021-7-8 VUE的简易表单提交
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style type="text/css">
div{
margin: 30px;
}
.mulitStyle{
height:auto;
}
</style>
</head>
<body>
<div id="app">
<form action="https://www.baidu.com">
<div>
<label>姓名</label><input type="text" name="" v-model="uname">
</div>
<div>
<label>性别</label>
<input type="radio" value="1" v-model="gender"><label>男</label>
<input type="radio" value="2" v-model="gender"><label>女</label>
</div>
<div>
<label>兴趣爱好</label>
<input type="checkbox" name="" value="游泳" v-model="aihao">游泳
<input type="checkbox" name="" value="打球" v-model="aihao">打球
<input type="checkbox" name="" value="音乐" v-model="aihao">音乐
<input type="checkbox" name="" value="电影" v-model="aihao">电影
</div>
<div class="mulitStyle">
<label>课程</label>
<select v-model="kecheng" class="mulitStyle" multiple>
<option value="1">语文</option>
<option value="2">数学</option>
<option value="3">英语</option>
<option value="4">体育</option>
</select>
</div>
<div>
<label>简介</label>
<textarea>
</textarea>
</div>
<div><input type="submit" name="" @click.prevent="handle"></div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
//在原生js中使用
var obj={
}; new Vue({
el: '#app',
data: {
uname:'张三',
gender:2,
aihao:["游泳","打球"],
kecheng:[]
},
methods:{
handle:function(){
console.log(this.uname);
console.log(this.gender);
console.log(this.aihao);
console.log(this.kecheng);
}
}
})
</script>
</body>
</html>
2021-7-8 VUE的简易表单提交的更多相关文章
- VUE中关于表单提交的简单实现
main.js import Vue from "../vue.js"; import App from "./App.js"; //启动 new Vue({ ...
- 简单的vue.js的表单提交数据至flask然后数据库入库,再将表里面的数据展示在网页
一.先在数据库中创建表格 在mysql中建users库并建立一个含有ID,username,email三个字段的user表 二.去vue的组件里面写页面的表单代码,注意form标签里的action需要 ...
- vue---阻止默认表单提交的三种方法
vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...
- vue之回车触发表单提交
vue之回车触发表单提交 操作: 在From标签中添加: @keyup.enter.native="handleSubmit" 注意: 1.若添加在Input标签上,只有聚焦在该i ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交
vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- vue动态生成表单
vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...
- 【Vue】强化表单的9个Vue输入库
一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...
- 【VUE】3.表单操作
1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...
随机推荐
- RTSP Server(LIVE555)源码分析(三)-DESCRIBE信令
主要分析RTSPServer::RTSPClientSession针对客户端DECCRIBE信令处理. 一.回调函数incomingRequestHandler分析 回顾一下rtsp客户端sessio ...
- FreeSWITCH使用L16编码通信及raw数据提取
环境:CentOS 7.6_x64 FreeSWITCH版本 :1.10.9 Python版本:3.9.12 一.背景描述 PCM(Pulse Code Modulation,脉冲编码调制)音频数据是 ...
- Solon 框架，单月下载量超100万了！！！
Solon 框架,于2023年的四月份突冲100万下载量了.感谢开源的力量,我们同喜同荣!!!Solon 目前,是"可信开源共同体"的新成员,积极参与中科院的"开源之夏& ...
- stl------iterator迭代器与Vector
Vector不定长数组 例:http://newoj.acmclub.cn/contests/1258/problem/4 1926: 2018蓝桥杯培训-STL应用专题-day 2 vector作业 ...
- 2022-04-28：有 n 个城市通过一些航班连接。给你一个数组 flights ，其中 flights[i] = [fromi, toi, pricei] ，表示该航班都从城市 fromi 开始，
2022-04-28:有 n 个城市通过一些航班连接.给你一个数组 flights ,其中 flights[i] = [fromi, toi, pricei] ,表示该航班都从城市 fromi 开始, ...
- 2022-01-10：路径交叉。给你一个整数数组 distance 。 从 X-Y 平面上的点 (0,0) 开始，先向北移动 distance[0] 米，然后向西移动 distance[1] 米，向南
2022-01-10:路径交叉.给你一个整数数组 distance . 从 X-Y 平面上的点 (0,0) 开始,先向北移动 distance[0] 米,然后向西移动 distance[1] 米,向南 ...
- 2021-08-24：合并石头的最低成本。有 N 堆石头排成一排，第 i 堆中有 stones[i] 块石头。每次移动（move）需要将连续的 K 堆石头合并为一堆，而这个移动的成本为这 K 堆石头的
2021-08-24:合并石头的最低成本.有 N 堆石头排成一排,第 i 堆中有 stones[i] 块石头.每次移动(move)需要将连续的 K 堆石头合并为一堆,而这个移动的成本为这 K 堆石头的 ...
- vue全家桶进阶之路27：Vue.js 3.0的下载和安装
使用脚手架vue-cli创建vue3项目,创建前需要准备以下: 1.node.js环境 见:https://www.cnblogs.com/beichengshiqiao/p/17251233.htm ...
- JAVA 23种设计模式（小白进阶必经之路）
如今几乎所有程序都遵循万物皆对象的开发理念,然在写程序中我们用的最多的应该是封装(encapsulation).继承(inheritance).多态(Polymorphism)开发模式:而更高一个境界 ...
- liunx操作系统下配置服务器
centos7 下配置服务器基本步骤 1,yum install 服务器名称 2,关闭防火墙,配置服务器配置文件,开启服务, 3,创建文件,设置访问权限, 4,本地登陆,测试服务器能否连通