So erhalten Sie Datenwerte in Vue

Vue.js ist ein beliebtes JavaScript-Framework, das im Bereich der Front-End-Entwicklung weit verbreitet ist. In Vue ist das Erhalten von Datenwerten ein sehr wichtiges Konzept. Vue bietet eine Reihe von Methoden zum Abrufen von Datenwerten, einschließlich des Abrufens von Werten in Daten, des Abrufens von Werten in berechneten Werten und des Abrufens von Werten in Requisiten. In diesem Artikel werden wir diese Methoden zum Erhalten von Datenwerten detailliert beschreiben.

1. Holen Sie sich den Wert in Daten

In der Vue-Instanz können wir über this.$data auf das Datenobjekt zugreifen. Zum Beispiel:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getData">获取数据</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  methods: {
    getData() {
      console.log(this.$data.msg)
    }
  }
}
</script>

Im obigen Code haben wir das msg-Attribut in data definiert und über this.$data.msg darauf zugegriffen. Auf diese Weise können wir alle Attributwerte im Datenobjekt abrufen.

2. Ermitteln Sie den berechneten Wert

berechnet ist ein sehr nützliches Konzept in Vue. Eine berechnete Eigenschaft ist reaktiv und wird automatisch neu berechnet, wenn sich die Eigenschaften ändern, von denen sie abhängt. Wenn wir die Werte berechneter Eigenschaften erhalten, können wir direkt darauf zugreifen. Zum Beispiel:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getData">获取数据</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      name: 'Lucy',
      age: 18
    }
  },
  computed: {
    msg() {
      return `我的名字是${this.name}，我今年${this.age}岁了。`
    }
  },
  methods: {
    getData() {
      console.log(this.msg)
    }
  }
}
</script>

Im obigen Code definieren wir ein berechnetes Attribut msg, das zur Berechnung einer Zeichenfolge verwendet wird. Wir greifen direkt über this.msg auf den Wert dieser berechneten Eigenschaft zu.

3. Holen Sie sich den Wert in props

Wenn Sie Vue zum Entwickeln einer Komponente verwenden, können wir das props-Attribut in der Komponente definieren und Daten darüber weiterleiten. Wenn wir den Wert in props abrufen, können wir direkt über das props-Objekt darauf zugreifen. Zum Beispiel:

<template>
  <div>
    <p>{{msg}}</p>
  </div>
</template>
 
<script>
export default {
  props: {
    name: String,
    age: Number
  },
  computed: {
    msg() {
      return `我的名字是${this.name}，我今年${this.age}岁了。`
    }
  }
}
</script>

Im obigen Code definieren wir zwei Requisitenattribute namens und Alter, bei denen es sich um Zeichenfolgen- bzw. numerische Typen handelt. Wir greifen über this.name und this.age auf ihre Werte zu.

4. Zusammenfassung

In Vue ist das Erhalten von Datenwerten ein sehr wichtiges Konzept. Wir können über diese $ data auf alle Eigenschaftswerte im Datenobjekt zugreifen, den Wert der berechneten Eigenschaft durch direkten Zugriff auf die berechnete Eigenschaft erhalten und die von der übergeordneten Komponente über das Requisitenobjekt übergebenen Daten abrufen. Diese Methoden können uns dabei helfen, Datenwerte bequemer zu erhalten und die Front-End-Entwicklung effizienter zu gestalten.

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