vue计算属性和methods区别

最新推荐文章于 2024-03-18 08:20:54 发布

IT悍将阿瑞

最新推荐文章于 2024-03-18 08:20:54 发布

阅读量258

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/jiarui_mama/article/details/115051341

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

作用区别

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>