在本篇文章中，我们将通过具体的示例给大家介绍vue中的计算（computed ）属性。
什么是计算属性（computed ）?
计算属性看起来就像vue中的数据（data）属性，但是我们可以执行一些算术和非算术任务。
<template> <ul> <li>first name : {{firstname}}</li> <li>last name : {{lastname}}</li> <li>full name : {{firstname + ' '+ lastname}}</li> </ul></template><script> data:function(){ return{ firstname: "sai", lastname: "gowtham" } }</script>
在上面的代码中，我们创建了两个数据属性firstname和lastname，并将其插入到template中。
如果你查看我们的template，我们在{{}}花括号中添加了full name逻辑。
例子
如何创建第一个计算属性的示例。
计算属性在计算属性对象中声明。
<template> <ul> <li>first name : {{firstname}}</li> <li>last name : {{lastname}}</li> <!-- 计算属性 --> <li>full name : {{fullname}}</li> </ul></template><script>export default{ data:function(){ return{ firstname: "sai", lastname: "gowtham" } }, computed:{ fullname:function(){ return this.firstname+' '+this.lastname } }}
这里我们添加了一个名为fullname的计算属性，它是一个函数，返回用户的全名。
我们可以像使用数据属性一样在template中使用计算属性。
计算属性由vue缓存，因此它只在底层数据属性更改时重新评估逻辑，这意味着如果firstname或lastname没有更改，那么它只返回先前计算的结果，而不再次运行函数。
相关推荐：《javascript教程》
以上就是vue.js计算属性是什么？（代码示例）的详细内容。