Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in berechnete Eigenschaften in vue.js

零到壹度
Freigeben: 2018-04-13 17:24:33
Original
993 Leute haben es durchsucht

Der Inhalt dieses Artikels ist eine Einführung in die berechneten Eigenschaften von vue.js. Er hat einen gewissen Referenzwert.

  • berechnete Methode
    - deklariert eine berechnete Eigenschaft „reversedMessage“. Die bereitgestellte Funktion wird als Getter für die Eigenschaft vm.reversedMessage verwendet. vm.reversedMessage hängt von vm.message ab. Wenn sich vm.message ändert, wird auch vm.reversedMessage aktualisiert.

<p id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Runoob!&#39;
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})</script>
Nach dem Login kopieren
Nach dem Login kopieren
  • Methodenmethode
    -Der Effekt ist derselbe, aber die Berechnung basiert auf seinem Abhängigkeitscache und nur die relevanten Abhängigkeiten ändern den Wert wird erst dann neu bewertet. Bei Methoden wird die Funktion beim erneuten Rendern immer erneut aufgerufen und ausgeführt.

methods: {
  reversedMessage2: function () {
    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}
Nach dem Login kopieren
Nach dem Login kopieren
  • Das berechnete Attribut verfügt standardmäßig nur über einen Getter, Sie können jedoch bei Bedarf auch einen Setter bereitstellen: Wird zum Aktualisieren des ursprünglichen Attributs

    < verwendet 🎜>

  • berechnete Methode

    – deklariert eine berechnete Eigenschaft „reversedMessage“. Die bereitgestellte Funktion wird als Getter für die Eigenschaft vm.reversedMessage verwendet. vm.reversedMessage hängt von vm.message ab. Wenn sich vm.message ändert, wird auch vm.reversedMessage aktualisiert.

<p id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Runoob!&#39;
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})</script>
Nach dem Login kopieren
Nach dem Login kopieren
  • Methodenmethode

    -Der Effekt ist derselbe, aber die Berechnung basiert auf seinem Abhängigkeitscache und nur die relevanten Abhängigkeiten ändern den Wert wird erst dann neu bewertet. Bei Methoden wird die Funktion beim erneuten Rendern immer erneut aufgerufen und ausgeführt.

methods: {
  reversedMessage2: function () {
    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}
Nach dem Login kopieren
Nach dem Login kopieren
  • Das berechnete Attribut verfügt standardmäßig nur über einen Getter, Sie können jedoch bei Bedarf auch einen Setter bereitstellen: Wird zum Aktualisieren des ursprünglichen Attributs

Das obige ist der detaillierte Inhalt vonEinführung in berechnete Eigenschaften in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage