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 ...
随机推荐
- 在unity中制作live2d参数的AnimationClip[简单随笔]
假定:已经成功导入模型.相关文档参考:https://github.com/gtf35/live2d_unity_sdk_chinese_document(人力翻译版的Live2d SDK文档) 全部 ...
- Apache ShenYu 学习笔记一
1.简介 这是一个异步的,高性能的,跨语言的,响应式的 API 网关. 官网文档:https://shenyu.apache.org/zh/docs/index 仓库地址:https://github ...
- 第十四届蓝桥杯省赛C++ B组（个人经历 + 题解）
参赛感受 这是我第一次参加蓝桥杯的省赛,虽然没什么参赛经验,但是自己做了很多前几届蓝桥杯的题,不得不说,这一届蓝桥杯省赛的难度相较于之前而言还是比较大的.之前很流行蓝桥杯就是暴力杯的说法,但是随着参赛 ...
- SqliLabs 第二关 ,数字型注入！！！
首先打开网页,进行注入点的测试 输入?id=1 and 1=1发现1=2的时候出现了报错,说明服务器接收了我们的指令,并且进行了反馈,说明了有注入点的存在,然后对注入点进行测试 然后输入order b ...
- 通过空间占用和执行计划了解SQL Server的行存储索引
1 索引介绍 索引是一种帮助查询语句能够快速定位到数据的一种技术.索引的存储方式有行存储索引.列存储索引和内存优化三种存储方式: 行存储索引,使用B+树结构,行存储指的是数据存储格式为堆.聚集索引和内 ...
- 2022-10-31：以下go语言代码输出什么？A：map[]；B：nil；C：Panic；D：编译错误。 package main import “fmt“ func main() {
2022-10-31:以下go语言代码输出什么?A:map[]:B:nil:C:Panic:D:编译错误. package main import "fmt" func main( ...
- 2021-04-03：给定两个字符串str1和str2，想把str2整体插入到str1中的某个位置，形成最大的字典序，返回字典序最大的结果。
2021-04-03:给定两个字符串str1和str2,想把str2整体插入到str1中的某个位置,形成最大的字典序,返回字典序最大的结果. 福大大 答案2021-04-03: 1.暴力法. 2.DC ...
- 2021-09-28：合并区间。以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] = [starti, endi] 。请你合并所有重叠的区间，并返回一个不重叠
2021-09-28:合并区间.以数组 intervals 表示若干个区间的集合,其中单个区间为 intervals[i] = [starti, endi] .请你合并所有重叠的区间,并返回一个不重叠 ...
- 流计算中kafka的OffsetReset策略
朋友的公司做的是西南某边境省份网红新能源车的数据处理,由于新能源车的火爆,从年初从现在,数据量已经翻番.但与此同时,服务器却没有多少增加.无奈之下,只能暂时将kafka的数据存储时间由之前的1天改为6 ...
- 2013年蓝桥杯C／C++大学A组省赛真题（排它平方数）
题目描述: 小明正看着 203879 这个数字发呆. 原来,203879 * 203879 = 41566646641 这有什么神奇呢?仔细观察,203879 是个6位数,并且它的每个数位上的数字都是 ...