So übergeben Sie einen booleschen Wert direkt in Vue

Vue ist ein beliebtes JavaScript-Framework zum Erstellen interaktiver, moderner Webanwendungen. Vue ist leicht zu erlernen, effizient und flexibel und ermöglicht Entwicklern die schnelle Erstellung leistungsstarker Single-Page-Anwendungen. In diesem Artikel wird vorgestellt, wie Vue boolesche Werte direkt übergibt.

In der Vue-Komponente können wir die übergebenen Daten über das Props-Attribut der Komponente empfangen. In der übergeordneten Komponente können wir über die v-bind-Direktive Daten an die untergeordnete Komponente übergeben. Normalerweise übergeben wir boolesche Werte wie folgt an Unterkomponenten:

<template>
  <div>
    <child-component :is-true="true"></child-component>
  </div>
</template>

Die V-Bind-Anweisung wird hier verwendet, um den Wert an die Unterkomponente zu übergeben, und die Unterkomponente kann diesen Wert über Requisiten empfangen:

Vue.component('child-component', {
  props: ['isTrue'],
  template: '<div>{{ isTrue }}</div>'
});

In In diesem Beispiel übergeben wir explizit einen booleschen Wert an die Unterkomponente, und die Unterkomponente kann basierend auf diesem Wert eine entsprechende Verarbeitung durchführen.

In einigen Fällen möchten wir jedoch möglicherweise einen Ausdruck direkt an die untergeordnete Komponente übergeben, und das Ergebnis dieses Ausdrucks ist ein boolescher Wert. Zum Beispiel:

<template>
  <div>
    <child-component :is-true="foo === &#39;bar&#39;"></child-component>
  </div>
</template>

In diesem Beispiel hoffen wir festzustellen, ob der Wert der foo-Variablen gleich „bar“ ist, und wenn ja, true an die untergeordnete Komponente zu übergeben. In Vue wird diese Schreibweise jedoch nicht unterstützt. Wenn es wie oben beschrieben geschrieben wird, erhält die untergeordnete Komponente einen String „foo === 'bar' anstelle eines booleschen Werts.

Eine Möglichkeit, dieses Problem zu lösen, besteht darin, berechnete Eigenschaften in der übergeordneten Komponente zu verwenden:

<template>
  <div>
    <child-component :is-true="isFooBar"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foo: 'bar'
    };
  },
  computed: {
    isFooBar() {
      return this.foo === 'bar';
    }
  }
};
</script>

In diesem Beispiel definieren wir eine berechnete Eigenschaft isFooBar, die basierend auf dem Wert von foo, If bestimmt, ob sie gleich „bar“ ist Ja, es gibt true zurück, andernfalls gibt es false zurück. Anschließend übergeben wir diese berechnete Eigenschaft an die untergeordnete Komponente in der Vorlage, und die untergeordnete Komponente kann einen booleschen Wert empfangen.

Obwohl dieser Ansatz das Problem lösen kann, fügt er zusätzlichen Code hinzu und ist möglicherweise nicht die einfachste Lösung. Glücklicherweise bietet Vue eine einfachere Möglichkeit, boolesche Werte direkt zu übergeben. Wir müssen nur den unären Operator + vor dem booleschen Ausdruck hinzufügen, um ihn in einen booleschen Wert umzuwandeln:

<template>
  <div>
    <child-component :is-true="+foo === +bar"></child-component>
  </div>
</template>

In diesem Beispiel verwenden wir den unären Operator +, um foo und bar in numerische Typen umzuwandeln und dann zu vergleichen. Das Vergleichsergebnis ist ein boolescher Wert, der direkt an die Unterkomponente übergeben werden kann, und die Unterkomponente kann einen booleschen Wert empfangen.

Zusammenfassend lässt sich sagen, dass boolesche Werte direkt in Vue übergeben werden können. Es ist jedoch zu beachten, dass wir bei der Übergabe eines Ausdrucks den unären Operator + verwenden müssen, um ihn zu einem booleschen Wert zu zwingen. Auf diese Weise können wir Daten vom Typ Boolean in Vue einfacher verarbeiten.

Das obige ist der detaillierte Inhalt vonSo übergeben Sie einen booleschen Wert direkt in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!