vue 计算属性_vue.js计算属性是什么？（代码示例）

点击蓝字关注我们！每天获取最新的编程小知识！

源 / php中文网      源 / www.php.cn

在本篇文章中，我们将通过具体的示例给大家介绍Vue中的计算(Computed )属性。

什么是计算属性(Computed )?

计算属性看起来就像Vue中的数据(data)属性，但是我们可以执行一些算术和非算术任务。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

First name : {{firstName}}    Last name : {{lastName}}    Full name : {{firstName + ' '+ lastName}}  data:function(){      return{          firstName: "Sai",          lastName: "Gowtham"      }  }

在上面的代码中，我们创建了两个数据属性firstName和lastName，并将其插入到template中。

如果你查看我们的template，我们在{{}}花括号中添加了Full Name逻辑。

例子

如何创建第一个计算属性的示例。

计算属性在计算属性对象中声明。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

First name : {{firstName}}    Last name : {{lastName}}    Full name : {{fullName}} export default{      data:function(){      return{          firstName: "Sai",          lastName: "Gowtham"      }   },   computed:{       fullName:function(){           return this.firstName+' '+this.lastName       }   } }

这里我们添加了一个名为fullName的计算属性，它是一个函数，返回用户的全名。

我们可以像使用数据属性一样在template中使用计算属性。

计算属性由vue缓存，因此它只在底层数据属性更改时重新评估逻辑，这意味着如果firstName或lastName没有更改，那么它只返回先前计算的结果，而不再次运行函数。

-END-

声明：本文选自「 php中文网 」，搜索「 phpcnnew 」即可关注！

▼