<!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的简易表单提交的更多相关文章

  1. VUE中关于表单提交的简单实现

    main.js import Vue from "../vue.js"; import App from "./App.js"; //启动 new Vue({ ...

  2. 简单的vue.js的表单提交数据至flask然后数据库入库,再将表里面的数据展示在网页

    一.先在数据库中创建表格 在mysql中建users库并建立一个含有ID,username,email三个字段的user表 二.去vue的组件里面写页面的表单代码,注意form标签里的action需要 ...

  3. vue---阻止默认表单提交的三种方法

    vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...

  4. vue之回车触发表单提交

    vue之回车触发表单提交 操作: 在From标签中添加: @keyup.enter.native="handleSubmit" 注意: 1.若添加在Input标签上,只有聚焦在该i ...

  5. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  7. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  8. vue动态生成表单

    vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  9. 【Vue】强化表单的9个Vue输入库

    一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...

  10. 【VUE】3.表单操作

    1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...

随机推荐

  1. MySQL-(InnoDB)事务和锁

    在事务并行处理背景下,不同的事务之间因数据共享的状态变化,存在着某种依赖/隔离影响.即事务隔离级别. 事务隔离级别,官网的解释在这里. InnoDB提供 SQL:1992 标准描述的所有四种事务隔离级 ...

  2. shell脚本编程(一)

    c81ba641-5ed7-4ab9-a7c0-e319e0f3890b 初识shell脚本编程 最近项目需求,需要了解下shell脚本编程,所以自己就必须玩玩了= = 初识shell脚本编程,找了几 ...

  3. 聊一聊 Valgrind 监视非托管内存泄露和崩溃

    一:背景 1. 讲故事 只要是程序总会出现各种莫名其妙的问题,比如:非托管内存泄露,程序崩溃,在 Windows 平台上一般用微软自家的官方工具 App Verifier 就可以洞察,那问题出在 Li ...

  4. 【深入浅出 Yarn 架构与实现】6-3 NodeManager 分布式缓存

    不要跳过这部分知识,对了解 NodeManager 本地目录结构,和熟悉 Container 启动流程有帮助. 一.分布式缓存介绍 主要作用就是将用户应用程序执行时,所需的外部文件资源下载缓存到各个节 ...

  5. Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp; nested exception is java.sql.SQLException: Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp

    好久没记录了,最近一直在忙着工作以及码前后端 记录下这种大多数人都会碰到但是又不一定找得到问题的错误 1 Value '0000-00-00 00:00:00' can not be represen ...

  6. 《啊哈C语言——逻辑的挑战》学习笔记

    第一章 梦想启航 第1节 让计算机开口说话 1.基础知识 1)计算机"说话"的两种方式 显示在屏幕上 通过喇叭发出声音 2)计算机"说话"之显示在屏幕上 格式: ...

  7. ODOO13之 八：Odoo 13开发之业务逻辑 – 业务流程的支持

    在前面的文章中,我们学习了模型层.如何创建应用数据结构以及如何使用 ORM API 来存储查看数据.本文中我们将利用前面所学的模型和记录集知识实现应用中常用的业务逻辑模式. 本文的主要内容有: 以单据 ...

  8. 【python基础】复杂数据类型-列表类型（列表切片）

    1.列表切片 前面学习的是如何处理列表的所有数据元素.python还可以处理列表的部分元素,python称之为切片. 1.1创建切片 创建切片,可指定要使用的第一个数据元素的索引和最后一个数据元素的索 ...

  9. 【保姆级教学】抓包工具Wireshark使用教程

    wireshark介绍 今天讲一下另一款底层抓包软件,之前写过两篇抓包软件 分别是 fiddler抓包[https://www.cnblogs.com/zichliang/p/16067941.htm ...

  10. JPA在事务结束时自动更新查询数据

    目录 现象 产生的原因 解决方法 现象 最近解决了一个困惑几天的bug,数据库里的某一些记录莫名其妙的被刷新了,排查过代码跟应用日志,可以确定不是代码执行的更新.直到今天看到了一条日志,在事务提交时报 ...