vue的计算属性computed

3月

本文最后更新于2020年03月14日，已经过了1770天没有更新，若内容或图片失效，请留言反馈

我们知道，在模板中可以直接通过插值语法来显示data中的一些数据。
但是在某些情况下，我们可能需要将数据经行一些转化后显示，或者需要将多个数据结合起来显示

比如我们有firstName和lastNamre两个变量，在模板中要显示完整的名称。
text 代码:
            <div id="app">
                <h2>firstName}</h2>
            </div>

            const app= new Vue({
                el:"#app",
                data:{
                    firstName:"xiu",
                    lastName:"fan"
                },
而且如果有多个地方需要显示名称，那我们就需要写多个{{firstName}} {{lastName}}

我们可以将以上代码换成计算属性

计算属性（computed）的使用与方法（methods）一样，但在使用计算属性时不需要括号,我们可以把它看作一个普通的属性来使用。

调用计算属性

{{comoutedFunction}}
调用方法
{{methodsFunction()}}

text 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
            <h2>{{getFullname()}}</h2>
            <!--使用计算属性不需要带括号，-->
            <h2>{{fullname}}</h2>
    </div>
           
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            const app= new Vue({
                el:"#app",
                data:{
                    firstName:"xiu",
                    lastName:"fan"
                },

                computed:{
                    fullname(){
                        return this.firstName + " " + this.lastName
                    }
                },

                methods:{
                    getFullname(){
                        return this.firstName + " " + this.lastName
                    }
                }
                
            })
        </script>
</body>
</html>

一:计算属性(computed)，也是一个属性，也是用来存储数据用的，但是和data属性相比还是有区别