以下例子很重要，要可以默写
    我们先用一个最简单的例子来引入计算属性
    比如我们在一个页面中，要我们输入姓和名，会自动的输出我们的名字

    1.     <body>
    2.         <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    3.         <!-- 准备好了容器 -->
    4.         <div id="app">
    5.             姓:<input type="text" v-model="firstname"> <br>
    6.             名:<input type="text" v-model="secondname"> <br>
    7.             全名:{{firstname}}{{secondname}}
    8.         </div>
    10.         <script >
    11.             var vm = new Vue ({
    12.                 data : {
    13.                     firstname:"dai",
    14.                     secondname:"liang",
    15.                 },
    17.             });
    18.             vm.$mount("#app")
    19.         </script>    
    20.     </body>

    但是这个例子有一个问题，比如我们输入 firstname的时候多输入了几个空格，你就会发现你的fullname出问题了，中间也输入了很多空格，那么我们需要trim()使用去除空格的方式

    1. <div id="app">
    2.             姓:<input type="text" v-model="firstname"> <br>
    3.             名:<input type="text" v-model="secondname"> <br>
    4.             全名:{{firstname.trim()}}{{secondname.trim()}}
    5.         </div>

    但是这样违背了Vue的原则，什么原则呢？

    https://cn.vuejs.org/v2/style-guide/
    组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
    复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

    所以针对以上我们应该使用计算属性或者方法

    进化二：
    使用方法，使用methods，先不看下面的例子，你能默写出来嘛？
    如果不能，请先看下面一段，针对下面这个问题如何取到firstname 和 secondname？，你能回答出来嘛？
    然后再看最终答案

    1. <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    2.         <div id="app">
    3.             姓:<input type="text" v-model="firstname"> <br>
    4.             名:<input type="text" v-model="secondname"> <br>
    5.             <!-- 注意这里是fullname() ,这里是调用的methods里面的函数 -->
    6.             全名:{{fullname()}}
    7.         </div>
    9.         <script >
    10.             var vm = new Vue ({
    11.                 data : {
    12.                     firstname:"dai",
    13.                     secondname:"liang",
    15.                 },
    16.                 methods:{
    17.                     fullname(){
    18.                         //这里如何取到firstname 和 secondname？
    20.                     }
    21.                 }
    23.             });
    24.             vm.$mount("#app")
    25.         </script>

    最终答案：

            <div id="app">
            姓:<input type="text" v-model="firstname"> <br>
            名:<input type="text" v-model="secondname"> <br>
            <!-- 注意这里是fullname() ,这里是调用的methods里面的函数 -->
            全名:{{fullname()}}
        </div>

        <script >
            var vm = new Vue ({
                data : {
                    firstname:"dai",
                    secondname:"liang",

                },
                methods:{
                    fullname(){
                        return this.fullname + this.secondname

                    },
                }

            });
            vm.$mount("#app")
        </script>    
    </body>

    计算属性的方式：

    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
        <div id="app">
            姓:<input type="text" v-model="firstname"> <br>
            名:<input type="text" v-model="secondname"> <br>
            <!-- 注意这里是fullname ,就不是调用的methods里面的函数了 -->
            全名:{{ fullname }}
        </div>

        <script >
            var vm = new Vue ({
                data : {
                    firstname: "dai",
                    secondname: "liang",    
                },
                computed:{
                    fullname() {
                        return this.firstname + this.secondname
                    }
                },

            });
            vm.$mount("#app")
        </script>

    那么computed的优势是什么？computed会有缓存，不用每次都自动执行，而使用methods那么就会每次自动执行
    凡是根据已有数据计算得到新数据的无参函数，都应该写为计算属性，而不是方法