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 ...
随机推荐
- 安装MongoDB、及基本使用
1.MongoDB简介 MongoDB是一个介于关系数据库和非关系数据库之间的产品,基于分布式文件存储的数据库.是非关系数据库当中功能最丰富,最像关系数据库的.它支持的数据结构非常松散,是类似json ...
- MySQL事务和锁实战篇
文章目录 MySQL事务和锁 事务 事务的控制语句 事务隔离级别设置 脏读 不可重复读 幻读 锁机制 InnoDB的行级锁 锁实战 死锁 总结 MySQL事务和锁 事务 说到关系型的数据库的事务,相信 ...
- 虚拟机的安装与linux系统的使用
虚拟机的安装与应用 下载安装VMware Workstation Pro 安装成功之后点击创建虚拟机 勾选典型机型 勾选自动检测安装映像文件 设置虚拟机的命名和安装路径 设置磁盘的大小和虚拟磁盘的储存 ...
- 解决pod健康检查问题
解决pod健康检查问题 引自:Solving the mystery of pods health checks failures in Kubernetes.原文中的某些描述并不清晰,本文作了调整. ...
- LVDS_33 support
在HR bank/HD bank中,支持LVDS的bank使用VCCO 3.3v供电,仅仅需要对端给过来的信号,满足标准的LVDS差模电压/共模电压的标准即可.如下截图: 限制: 仅能作为input ...
- vue中嵌入MP4 只有声音没图像
最近一个项目需要在页面嵌入一段视频,当然首选iframe了,直接嵌入了youku的视频,没问题,我想ok了.于是将url替换为本地的MP4发现只有声音没有任何图片,奇怪了,我首先想到是不是vue项目使 ...
- odoo部署安全性问题
本文档描述在生产中或在面向Internet的服务器上设置Odoo的基本步骤.它是在安装之后进行的,对于没有在internet上公开的开发系统来说,它通常不是必需的.警告如果您正在设置公共服务器,请务必 ...
- Java中如何中断线程
在Java中,可以使用以下方法中断线程: 1. 使用`interrupt()`方法:每个线程对象都有一个`interrupt()`方法,用于中断该线程.当调用线程的`interrupt()`方法时,它 ...
- 【Clickhouse】ReplaceingMergeTree引擎final实现合并去重探索
前言 在OLAP实践中,在有数据更新的场景中,比如存储订单数据,我们经常会用到ReplaceingMergeTree引擎来去重数据,以获取数据的最新状态.但是ReplaceingMergeTree引擎 ...
- SpringBoot RabbitMQ 实战解决项目中实践
1 基础预览 1.1 环境准备 Springboot 1.5.6.RELEAS Springcloud Dalston.SR2 1.2 交换机类型 交换机是用来发送消息的AMQP实体.交换机拿到一个消 ...