Vue中的计算属性

      由于模板的最初设计是用于简单运算的，当在模板内容中放入过多的逻辑，将导致模板过重且难以维护，因此引入了计算属性。在Vue中的计算属性由computed来提供，通过访问属性调用getter来返回值。

代码一：

<div id="app">
   <p>{{message.split('').reverse().join('')}}</p>
</div>

<script>
var vm = new Vue({
       el: '#app',
       data: {
           message: 'Love blog'
       }
    })
</script>

结果： ‘golb evoL’

代码二：

<div id="example">
  <p>message: "{{ message }}"</p>
  <p>reversedmessage: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Love blog '
  },
  computed: {
    // 计算属性 getter,我们亦可以提供一个setter
    reversedMessage:{ 
          get：function () {
                // `this` 指向当前vm实例
                return this.message.split('').reverse().join('')
              }
   //     set:function(val){
   //           this.message = val:
   //         }
    }
  }
})

结果:

    message: 'Love blog'

    reversedMessage: 'golb evoL'

       上面两段代码实现的效果相同，但计算属性可以处理更复杂的业务逻辑,解决相对复杂的问题，计算属性可以访问data中所有属性，使用其他方法也可以实现上述转换字符串的功能，但由计算属性来实现更为容易。

        在计算属性的使用时，我们需要声明并且提供函数作为属性的getter函数，在必要时也可以提供一个setter，在运行时setter函数也将被调用，改变掉相应的内容。并且计算属性在多数情况下皆适用。

 

 

 

 

转载于:https://my.oschina.net/u/3717557/blog/1616440