So gehen Sie mit der wiederholten Übermittlung von Daten um, wenn mehrmals auf die Vue-Schaltfläche geklickt wird

Dieses Mal zeige ich Ihnen, wie Sie mit mehreren Klicks auf die Vue-Schaltfläche und wiederholter Übermittlung von Daten umgehen Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Ereignisse

werden in zwei Situationen unterteilt: •Der erste Typ: Kein Datenoperationstyp

•Der zweite Typ: Operationsdatentyp

<template>
 <button @click="submit()" :disabled="isDisable">点击</button>
</template>
<script>
 export default {
  name: 'TestButton',
  data: function () {
   return {
    isDisable: false
   }
  },
  methods: {
   submit() {
    this.isDisable = true
    setTimeout(() => {
     this.isDisable = false
    }, 1000)
   }
  },
 }
</script>

Hier steuern wir isDisable, um „disabled“ festzulegen und so zu steuern, ob die Schaltfläche anklickbar oder nicht anklickbar ist. Der Standardwert ist Disable: Der Wert ist false und die Schaltfläche kann angeklickt werden. Wenn wir auf diese Schaltfläche klicken, setzen wir zunächst die Bindung isDisable der Schaltfläche auf true und nach 1 Sekunde sofort auf false. Der Benutzer hat also nur eine Sekunde Zeit, diese Taste zu betätigen.

Ich füge unten einen Beispielcode für Sie hinzuKlicken Sie auf den Beispielcode für wiederholte Übermittlung mehrmals

rrree

Glauben Sie es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Routenwächter beim Angular-Routing

Zusammenfassung der React-Routensprungmethoden

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit der wiederholten Übermittlung von Daten um, wenn mehrmals auf die Vue-Schaltfläche geklickt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!