您的位置 首页 javascript教程

vue.js计算属性是什么?(代码示例)

在本篇文章中,我们将通过具体的示例给大家介绍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计算属性是什么?(代码示例)的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:vue.js计算属性是什么?(代码示例)

文章地址:https://www.pyhw.net/34644_vue-js%e8%ae%a1%e7%ae%97%e5%b1%9e%e6%80%a7%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f%ef%bc%88%e4%bb%a3%e7%a0%81%e7%a4%ba%e4%be%8b%ef%bc%89.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图