vue中性别表单绑定提交

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=\, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="../vue.js"></script>
10 </head>
11
12 <body>
13     <div id="app">
14         <form action="http://www.baidu.com" method="get">
15             <label for="male">
16                 <input type="radio" value="男" name="sex" id="male" v-model="sex">男
17             </label>
18             <label for="female">
19                 <input type="radio" value="女" name="sex"  id="female" v-model="sex">女
20             </label>
21             <h2>你选择的是:{{sex}}</h2>
22             <input type="submit" value="提交">
23         </form>
24     </div>
25
26 </body>
27 <script>
28     const app = new Vue({
29         el: " #app ",
30         data() {
31             return {
32                 sex: ""
33             }
34         },
35     })
36 </script>
37
38 </html>

原文地址:https://www.cnblogs.com/smile6542/p/12231136.html

时间: 2024-10-28 22:43:30

vue中性别表单绑定提交的相关文章

Struts2中防止表单重复提交

一.防止表单的重复提交 1.在表单中加入<s:token/>标签 2.在动作类中加入token的拦截器<interceptor-ref name="defaultStack"></interceptor-ref> <interceptor-ref name="token"></interceptor-ref> 3.增加一个名称为invalid.token的结果视图<result name="

Struts2中解决表单重复提交

3. 表单的重复提交问题 1). 什么是表单的重复提交 > 在不刷新表单页面的前提下:  >> 多次点击提交按钮 >> 已经提交成功, 按 "回退" 之后, 再点击 "提交按钮". >> 在控制器响应页面的形式为转发情况下,若已经提交成功, 然后点击 "刷新(F5)" > 注意: >> 若刷新表单页面, 再提交表单不算重复提交 >> 若使用的是 redirect 的响应类型,

[原创]java WEB学习笔记73:Struts2 学习之路-- strut2中防止表单重复提交

本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 -----------------------------------------------------------------------------------------------------------------

MVC中Form表单的提交

Form表单是数据提交的一种,在MVC中Form表单提交到服务器中地址,接受Form表单的方式有一下几种: 1.采用实体Model类型提交,Form表单中的Input标签name要和Model对应的属性保持一致,接受Form表单的服务器端就可以直接以实体的方式存储,使用方式如下: Form表单: <form action="/Employee/SaveEmployee" method="post"> <table> <tr> &l

Django框架开发中避免表单重复提交

Form表单做为web2.0时代的重要角色,也是我们与web网站进行数据交互的重要渠道,但是大家在web网站开发过程中,都会遇到一个问题,那就是如何避免表单重复提交,我们可不确定用户可在提交了一个表单后,是否有足够的耐心等待我们的程序加载完成,如果此时用户不耐烦的在前台重复刷新页面,那么就会造成数据重复提交.信息不准确,因此我们在程序设计时一定要规避这样的问题,接下来介绍一下在Django框架开发中如何避免此问题. 首先说明一下Http协议中两种非常常见的方法GET和POST. 1.GET方法往

Struts中防止表单重复提交

Struts内部会经过很多interceptor,只需在struts.xml中配置如下代码就可以防止表单重复提交 <action name="login" class="com.lzw.action.UserAction"> <!-- 配置拦截器进行token拦截 --> <interceptor-ref name="defaultStack"/> <interceptor-ref name="

Java中避免表单重复提交

表单的重复提交: 没有完整的进行一次,先请求表单页面->再提交表单过程而完成数据提交 造成的根本原因: 没有完整的进行一次,先请求表单页面->再提交表单过程. 造成重复提交的现象: 由于服务器缓慢或网络延迟的原因,重复点击提交按钮. 已经提交成功,刷新成功页面(forward)(请求转发). 已经提交成功,通过回退,再次点击提交按钮 注意:回退后,刷新表单页面,重新再提交,这时,不是重复提交,而是发送新的请求,在Firefox下,重复提交到同一个地址的操作无效. 案例: 1 @WebServl

怎样才能让网页中的表单自动提交

<script type="text/javascript"> function load(){document.all.f1.submit();}</script> <body ><form action="地址" method="post" name="f1"></form> </body> 应该可以~

12-struts2防止表单重复提交

防止表单重复提交 问题:什么是表单重复提交? regist.jsp----->RegistServlet 表单重复提交 危害: 刷票. 重复注册.带来服务器访问压力(拒绝服务) 解决方案: 在页面上生成一个令牌(就是一个随机字符串),将其存储到session中,并在表单中携带. 在服务器端,获取数据时,也将令牌获取,将它与session中存储的token对比,没问题, 将session中令牌删除. struts2中怎样解决表单重复提交: 在struts2中解决表单重复提交,可以使用它定义的一个i