首頁 > web前端 > js教程 > vue.js的計算屬性介紹

vue.js的計算屬性介紹

零到壹度
發布: 2018-04-13 17:24:33
原創
1029 人瀏覽過

這篇文章跟大家分享的內容是vue.js的計算屬性介紹,有著一定的參考價值,有需要的朋友可以參考一下

  • computed方法
    -宣告了一個計算屬性reversedMessage 。提供的函數將用作屬性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依賴 vm.message,在 vm.message 發生變更時,vm.reversedMessage 也會更新。

<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>
登入後複製
登入後複製
  • methods 方法
    -效果上兩個都是一樣的,但是computed 是基於它的依賴緩存,只有相關依賴發生改變時才會重新取值。而使用 methods ,在重新渲染的時候,函數總是會重新呼叫執行。

methods: {
  reversedMessage2: function () {
    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}
登入後複製
登入後複製
  • computed 屬性預設只有getter ,但需要時你也可以提供一個setter :用來更新原有屬性

  • #computed方法
    -宣告了一個計算屬性reversedMessage 。提供的函數將用作屬性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依賴 vm.message,在 vm.message 發生變更時,vm.reversedMessage 也會更新。

<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>
登入後複製
登入後複製
  • methods 方法
    -效果上兩個都是一樣的,但是computed 是基於它的依賴緩存,只有相關依賴發生改變時才會重新取值。而使用 methods ,在重新渲染的時候,函數總是會重新呼叫執行。

methods: {
  reversedMessage2: function () {
    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}
登入後複製
登入後複製
  • computed 屬性預設只有getter ,但需要時你也可以提供一個setter :用來更新原有屬性

#

以上是vue.js的計算屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板