So erhalten Sie den Wert in Vue

Vue ist ein beliebtes Webentwicklungs-Framework, das syntaktischen Zucker für die bidirektionale Bindung bereitstellt. In Vue können wir die Daten auf der Seite problemlos abrufen und in Echtzeit auf deren Änderungen reagieren. In diesem Artikel wird untersucht, wie man Werte in Vue erhält.

Es gibt zwei Hauptmethoden, um Werte in Vue zu erhalten: Eine besteht darin, Anweisungen zu verwenden, und die andere darin, berechnete Eigenschaften zu verwenden.

Verwenden Sie Anweisungen zum Abrufen von Werten

Vue bietet einige Anweisungen zum einfachen Abrufen von Eingabe-, Auswahl- und anderen Werten auf der Seite.

V-Model-Direktive

Die V-Model-Direktive ist die am häufigsten verwendete Direktive zum Abrufen von Werten in Vue. Sie kann zum Binden des Werts eines Formulars verwendet werden Element und geben Sie es ein, wenn der Benutzer es eingibt. Aktualisieren Sie die Daten bei Bedarf automatisch. Im folgenden Code verwenden wir beispielsweise die V-Model-Direktive, um den Wert des Eingabefelds an das Nachrichtenattribut im Datenobjekt zu binden:

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

Jetzt, wenn Sie Text in die Eingabe eingeben In diesem Feld aktualisiert Vue automatisch den Nachrichtenattributwert in den Daten im Hintergrund und zeigt ihn im p-Tag an.

v-bind-Direktive

Die v-bind-Direktive kann verwendet werden, um ein oder mehrere Attribute in einer Vorlage dynamisch zu binden. Im folgenden Code verwenden wir beispielsweise v-bind, um das href-Attribut des a-Tags an das URL-Attribut im Datenobjekt zu binden:

<div id="app">
  <a v-bind:href="url">Vue.js</a>
</div>

var app = new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org/'
  }
})

v-on Directive

#🎜 🎜# Die v-on-Direktive kann zum Binden von Ereignissen verwendet werden. Im folgenden Code verwenden wir beispielsweise v-on, um das Klickereignis der Schaltflächenbeschriftung zu binden. Wenn auf die Schaltfläche geklickt wird, ruft Vue automatisch die Inkrementierungsmethode im Datenobjekt auf:

<div id="app">
  <button v-on:click="increment">{{ count }}</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function () {
      this.count++
    }
  }
})

Verwenden Sie Berechnungsattribute, um Werte abzurufen

In Vue können wir auch berechnete Eigenschaften verwenden, um Werte abzurufen. Eine berechnete Eigenschaft ist eine Eigenschaft mit einem Caching-Mechanismus, deren Wert auf Berechnungen anderer Daten basiert. Es wird automatisch neu berechnet, wenn sich die Daten ändern, auf denen es basiert.

Grundlegende Verwendung berechneter Eigenschaften

Im folgenden Code deklarieren wir beispielsweise eine berechnete Eigenschaft namens „reversedMessage“, deren Wert die Nachrichteneigenschaft im Datenobjekt „String Reversal“ ist:

<div id="app">
  <input v-model="message">
  <p>{{ reversedMessage }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

get- und set-Methoden berechneter Eigenschaften

Zusätzlich zur Definition des Werts einer berechneten Eigenschaft über die get-Methode können wir auch die set-Methode verwenden, um den Wert zu definieren einer berechneten Eigenschaft. Im folgenden Code deklarieren wir beispielsweise eine berechnete Eigenschaft namens „fullName“, deren Wert die Verkettung der Eigenschaften „firstName“ und „lastName“ im Datenobjekt ist. Wenn wir den Wert von fullName ändern, ruft Vue automatisch die Set-Methode auf, um gleichzeitig die Eigenschaften „firstName“ und „lastName“ im Datenobjekt zu aktualisieren:

<div id="app">
  <input v-model="firstName">
  <input v-model="lastName">
  <p>{{ fullName }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

Summary

In Vue haben wir Sie können V-Model, V-Bind, V-On und andere Anweisungen verwenden, um Daten auf der Seite abzurufen, und Sie können auch berechnete Eigenschaften verwenden, um die Daten zu berechnen und neue Werte zu generieren. Durch diese Methoden bietet Vue eine sehr bequeme Möglichkeit, Daten zu erhalten, sodass wir problemlos auf verschiedene Geschäftsanforderungen reagieren können.

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