Vue防止表单重复提交

霸道流氓

2024-06-26 帮助1人

在提交表单时按钮点击一次后，为防止重复表达提交，需要将提交按钮置灰。

这需要操作button的disabled属性。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Vue防止表单重复提交</title>
 </head>
 <body>
  <div id="app">
    <button @click="function1()" :disabled="isDisabled">提交</button>
  </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script>
  new Vue({
    el:'#app',
    data:{
      isDisabled:false
    },
    methods:{
      function1(){
        this.isDisabled = true
      }
    }
  })
</script>
 </body>
</html>

学新通

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhhkkekh

系列文章

Vue防止表单重复提交

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

TikTok加速器哪个好免费的TK加速器推荐

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗