So implementieren Sie die versteckte Funktion des Eingabefelds in Vue

Mit der Entwicklung von Webanwendungen erfordern immer mehr Geschäftsszenarien die Eingabe von Daten durch Benutzer, und das Benutzereingabefeld ist eine der notwendigen Komponenten, um dieses Ziel zu erreichen. In einigen Fällen müssen wir jedoch das Eingabefeld ausblenden. Dies geschieht natürlich nicht, um das Eingabefeld vollständig auszublenden, sondern um einen Teil des Eingabefelds auszublenden, z. B. das eingegebene Passwort usw. Es ist sehr einfach, das Eingabefeld in Vue auszublenden. In diesem Artikel erfahren Sie mehr über die Implementierungsdetails.

Zuerst müssen wir verstehen, was Vue ist. Vue ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Vue lässt sich problemlos in andere Bibliotheken oder bestehende Projekte integrieren und bietet außerdem eine sehr einfache API, mit der Benutzer verschiedene UI-Interaktionen problemlos durchführen können.

Als nächstes müssen wir einige wichtige Konzepte in Vue verstehen, nämlich Vue-Instanzen, Komponenten, Requisiten, Ereignisse und berechnete Eigenschaften.

• Vue-Instanz: Es ist ein Kernkonzept von Vue und ein mit neuem Vue erstelltes Objekt. Auf alle Eigenschaften und Methoden in der Vue-Instanz kann über die Instanz zugegriffen werden, und verschiedene Verhaltensweisen von Vue können auch über die Lebenszyklusmethoden der Vue-Instanz gesteuert werden.
• Komponente: Es handelt sich um ein unabhängiges Modul in Vue, das uns dabei helfen kann, den Code in kleinere, einfacher zu organisierende Teile zu zerlegen. Daher sind Komponenten ein sehr wichtiges Konzept in Vue.
• Props: ist ein Eigenschaftsobjekt der Vue-Komponente, das zum Übergeben von Daten an die Komponente verwendet wird. Props ist ein einseitiger Datenfluss, d. h. die übergeordnete Komponente kann Daten an die untergeordnete Komponente übergeben, die untergeordnete Komponente kann den Wert in props jedoch nicht direkt ändern.
• Ereignisse: Kann verwendet werden, um DOM-Ereignisse zu überwachen und darauf zu reagieren.
• Berechnete Eigenschaften: Werden zur Berechnung von Eigenschaften basierend auf den Werten anderer Variablen verwendet. Berechnete Eigenschaften sind ein wichtiges Konzept in Vue und werden häufig für Eigenschaftsberechnungen und dynamische Berechnungen innerhalb von Komponenten verwendet.

Nachdem wir diese Konzepte verstanden haben, können wir mit der Implementierung der Funktion zum Ausblenden des Eingabefelds beginnen. Zuerst müssen wir eine neue Vue-Instanz erstellen und eine textInput-Komponente hinzufügen. Diese Komponente benötigt eine Requisite, um zu steuern, ob das Eingabefeld ausgeblendet ist. Das Folgende ist der Code dieser Komponente:

// textInput.vue
<template>
  <div>
    <input 
      type="text" 
      :value="inputValue"
      @input="handleInput"
      v-if="!hidden"
    />
    <input 
      type="password" 
      :value="inputValue"
      @input="handleInput"
      v-if="hidden"
    />
  </div>
</template>

<script>
  export default {
    name: 'textInput',
    props: {
      hidden: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      handleInput(e) {
        this.inputValue = e.target.value
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

In dieser Komponente definieren wir zwei Eingabefelder, eines ist ein normales Texteingabefeld und das andere ist ein Passwort-Eingabefeld. Der einzige Unterschied zwischen ihnen ist dass sie Attribut eingeben. Beide Eingabefelder sind an die Variable inputValue gebunden, die zum Speichern des eingegebenen Werts verwendet wird. Gleichzeitig sind sie auch an das Eingabeereignis gebunden. Wenn der Benutzer in das Eingabefeld eingibt, aktualisieren wir den Wert der Variablen inputValue und lösen ein Eingabeereignis aus.

In der Komponente verwenden wir die v-if-Direktive, um zu steuern, ob das Eingabefeld ausgeblendet ist. Wenn „hidden“ „false“ ist, wird das normale Texteingabefeld angezeigt; wenn „hidden“ „true“ ist, wird das Passwort-Eingabefeld angezeigt. Auch hier werden Props verwendet, um das versteckte Attribut an die Komponente zu übergeben.

Als nächstes müssen wir diese Komponente in der Vue-Instanz verwenden und ihr Ausblenden über unsere benutzerdefinierte Eingabevariable steuern. Das Folgende ist der Implementierungscode:

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ hideInput ? 'Show' : 'Hide' }} input
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

In dieser Vue-Instanz führen wir die oben beschriebene Komponente ein und definieren zwei Variablen: input und hideInput. Unter anderem wird die Eingabevariable verwendet, um den Wert im Eingabefeld zu speichern, und die Variable hideInput wird verwendet, um das Ausblenden des Eingabefelds zu steuern.

Wir rendern die Komponente in der Vorlage und übergeben die Variable hideInput als Parameter, um zu steuern, ob das Eingabefeld ausgeblendet ist. Wir haben außerdem eine Schaltfläche zum Umschalten des Werts der Variable hideInput hinzugefügt, um umzuschalten, ob im Eingabefeld ein Kennwort verwendet werden soll.

Schließlich müssen wir der Vue-Instanz eine berechnete Eigenschaft hinzufügen, um den auf der Schaltfläche angezeigten Text zu steuern. Das Folgende ist der spezifische Code:

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ buttonText }}
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    computed: {
      buttonText() {
        return this.hideInput ? 'Show' : 'Hide' + ' input'
      }
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

Hier fügen wir ein berechnetes Attribut buttonText hinzu, um den auf der Schaltfläche angezeigten Text basierend auf dem Wert von hideInput zu bestimmen. Auf diese Weise lautet der Schaltflächentext „Eingabe ausblenden“, wenn hideInput „false“ ist, und wenn „hideInput“ wahr ist, lautet der Schaltflächentext „Eingabe anzeigen“.

Mit dem obigen Code können wir die Funktion zum Ausblenden des Eingabefelds einfach über Vue implementieren. Zusammenfassend lässt sich sagen, dass Sie zum Ausblenden des Eingabefelds in Vue eine Komponente definieren müssen, die zwei Eingabefelder enthält, die Informationen darüber, ob es ausgeblendet werden soll, über Requisiten übergeben und außerdem berechnete Eigenschaften hinzufügen müssen, um den auf der Schaltfläche des angezeigten Text zu steuern verstecktes Eingabefeld.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die versteckte Funktion des Eingabefelds in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!