当前位置:  首页  >  前端开发  >  JavaScript

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

在本篇文章中,我们将通过具体的示例给大家介绍Vue中的计算属性。什么是计算属性?计算属性看起来就像Vue中的数据属性,但是我们可以执行一些算术和非算术任务。
在本篇文章中,我们将通过具体的示例给大家介绍Vue中的计算(Computed )属性。

什么是计算属性(Computed )?

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



《script》
 data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
 }
《script》

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

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

例子

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

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



《script》
export default{
     data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
  },
  computed:{
      fullName:function(){
          return this.firstName+' '+this.lastName
      }
  }
}

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

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

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

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有