Vue 计算属性

计算属性是一种特殊的属性.用法和methods一样，里面写函数，函数必须有一个唯一的返回值。

语法

1 使用计算属性
    {{计算属性的方法名字}}
2 定义计算属性对应的方法
   var app = new Vue({
    el: "#app",
    data: {
        message: "it"
    },
    computed:{
        计算属性的方法名字: function(){
            return 处理结果.
        }
    }
});

优点

1 . 模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护.
2.  我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

<div id="app">
    <h1>原文显示数据</h1>
   {{message}}
    <h1>在视图中对数据进行反转</h1>
    {{message.split("").reverse().join("")}}
    <h1>使用方法对数据进行反转</h1>
   {{reverse(message)}}
    <h1>使用过滤器对数据进行反转</h1>
    {{message|reverse}}
    <h1>使用计算属性对数据进行反转</h1>
   {{reverseStr}}

</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
       el: "#app",
        data: {
           message: "itsource"
       },
        /*在页面中可用的定义方法*/
       methods: {
            reverse: function (message) {
                return message.split("").reverse().join("");
            }
        },
        /*定义过滤器*/
        filters:{
           reverse:function (value) {
                return value.split("").reverse().join("");
            }
        },
        /*定义计算属性*/
        computed:{
            reverseStr:function () {
                return this.message.split("").reverse().join("");
           }
        }
    });
</script>