计算属性的基本使用

1.含义

需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示时使用计算属性

2.字符串拼接的插值操作

显示 Taylor Swift
1.Mastach语法插入 用空格隔开

    <div id="app">
        <h2>{{firstName}} {{lastName}}</h2>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data : {
                firstName : 'Taylor',
                lastName : 'Swift'
            }
        })
    </script>

2.Mastach语法内两个属性用空格拼接

    <div id="app">
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{firstName + ' ' + lastName }}</h2>
    </div>

3.使用函数拼接

    <div id="app">
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{firstName + ' ' + lastName }}</h2>
        <h2>{{getFullName()}}</h2>
    </div>

            methods : {
                getFullName : function() {
                    return this.firstName + ' ' + this.lastName;
                }
            }

这三种方法虽然都可以达到效果，但是在代码的整洁性上都不好，所以在需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示的情况下，就需要使用计算属性。

3.计算属性

计算属性写在Vue的computed属性名下

image.png

注意：
1.用计算属性做插值操作时不能加()，这种写法是错误的，计算属性是属性并不是方法

        <!--错误用法-->
        <h2>{{fullName()}}</h2>

下一篇说明computed是如何将存储的函数转成属性的