Introduction aux propriétés calculées dans vue.js

Le contenu de cet article est une introduction aux propriétés calculées de vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

• méthode calculée
  - déclare une propriété calculée reverseMessage. La fonction fournie sera utilisée comme getter pour la propriété vm.reversedMessage. vm.reversedMessage dépend de vm.message Lorsque vm.message change, vm.reversedMessage sera également mis à jour.

<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>

• méthodes
  -L'effet est le même, mais le calcul est basé sur son cache de dépendances, et seules les dépendances pertinentes changent La valeur sera alors réévalué seulement. Avec les méthodes, la fonction sera toujours appelée et exécutée à nouveau lors du nouveau rendu.

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

• L'attribut calculé n'a qu'un getter par défaut, mais vous pouvez également fournir un setter si nécessaire : utilisé pour mettre à jour l'attribut d'origine

• méthode calculée
  - déclare une propriété calculée reverseMessage. La fonction fournie sera utilisée comme getter pour la propriété vm.reversedMessage. vm.reversedMessage dépend de vm.message Lorsque vm.message change, vm.reversedMessage sera également mis à jour.

<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>

• méthodes
  -L'effet est le même, mais le calcul est basé sur son cache de dépendances, et seules les dépendances pertinentes changent La valeur sera alors réévalué seulement. Avec les méthodes, la fonction sera toujours appelée et exécutée à nouveau lors du nouveau rendu.

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

• L'attribut calculé n'a qu'un getter par défaut, mais vous pouvez également fournir un setter si nécessaire : utilisé pour mettre à jour l'attribut d'origine

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!