Vue那些事儿（计算属性）

Vue.js计算属性

• 计算属性关键词：computed

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

计算属性的实例：
这个例子提供的函数作为属性vm.reverseMessage的getter。
vm.reverseMessage依赖于vm.message,在vm.message发生改变时，vm.reverseMessage也会更新。

 <div id="app">
        <p>{{message}}</p>
        <p>{{reversemessage}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                message:'UEUU'
            },
            computed:{
                reversemessage:function(){
                //计算属性的getter
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

• 也可以用methods来代替computed，使用methods，在重新渲染的时候，函数总会重新调用执行。可以说，conputed性能更好，但是如果你不希望缓存，可以使用methods属性。

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

• computed setter
  computed属性默认只有getter，不过在需要的时候也可也提供getter：

<script>
         var vm=new Vue({
             el:'#app',
             data:{
                 name:'Google',
                 url:'http://www.google.com'

             },
             computed:{
                 site:{
                     get:function(){
                         return this.name+''+this.url
                     },
                     set:function(newValue){
                         var names=newValue.split(' ')//split把一个字符串分割成字符数组
                         this.name=name[0]
                         this.url=names[names.length-1]
                     }
                 }
             }
         })
         //调用setter，var.name和vm.url也会被对应重新
         vm.site='菜鸟教程 http://www.runoob.com';
         document.write('name'+vm.name);
         document.write('url:'+vm.url);
     </script>