vue.js的计算属性介绍-js教程-PHP中文网

vue.js的计算属性介绍

零到壹度

发布： 2018-04-13 17:24:33

原创

1108人浏览过

本篇文章给大家分享的内容是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: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split('').reverse().join('')
    }
  }
})</script>

登录后复制

methods 方法
-效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

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: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split('').reverse().join('')
    }
  }
})</script>

登录后复制

methods 方法
-效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：用于更新原有属性

以上就是vue.js的计算属性介绍的详细内容，更多请关注php中文网其它相关文章！