作用区别

methods 用来声明函数使用
计算属性computed计算的是属性

实例代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <div id="app">
    <h2>{{mt()}}</h2>
    <h2>{{mt()}}</h2>
    <h2>{{mt()}}</h2>
    <h2>{{ct}}</h2>
    <h2>{{ct}}</h2>
    <h2>{{ct}}</h2>

    </div>
    <script src="../js/vue.js"></script>
    <script>

        const app=new Vue({
            el:"#app",
            data:{
                firstName:"LeBron",
                lastName:"James"
            },
            methods:{
                mt:function(){
                    console.log("methods");
                    return this.firstName+this.lastName;
                }
            },
            computed:{
                ct:function () {
                    console.log("ct");
                    return this.firstName+this.lastName;
                }
            }
        });

    </script>


</body>
</html>
实例效果

vue计算属性和methods区别_微信公众号

-END-

如果你喜欢我的分享，欢迎关注微信公众号 java学长分享技术干货！

悄悄告诉你免费赠送重磅互联网架构师教程，提升职场技术水平！

vue计算属性和methods区别_html_02