举例说明Vue计算属性和methods的区别

最新推荐文章于 2023-10-28 15:33:14 发布

Poulyield

最新推荐文章于 2023-10-28 15:33:14 发布

阅读量431

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript html5

本文链接：https://blog.youkuaiyun.com/ksws0319440/article/details/106958135

版权

Vue.js 专栏收录该内容

2 篇文章

订阅专栏

Vue的计算属性和methods的区别主要在于计算属性是基于的依赖缓存的，下面是例子：

<body>

<div id="app">
   111111
</div>
<script>

       var app = new Vue({

       el:'#app',
       data:{

           firstName:'Jack',
           lastName:'Green'
       },
       computed:{

           fullName_c:function(){

                   console.log("fullName_c");
                   return this.firstName + ' ' + this.lastName;
           }


       },
       methods:{

           fullName_m:function(){

               console.log("fullName_m");
               return this.firstName + ' ' + this.lastName;
           }
       }
   })

   var name1 = app.fullName_c;
   console.log("1:" + name1);
   name1 = app.fullName_c;
   console.log("2:" + name1);

   console.log("//-------------------------------");

   var name2 = app.fullName_m();
   console.log("1:" + name2);
   name2 = app.fullName_m();
   console.log("2:" + name2);