vue.js计算属性指的是什么-创新互联

这篇文章主要介绍vue.js计算属性指的是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联主要从事成都做网站、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务克拉玛依区,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

什么是计算属性（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没有更改，那么它只返回先前计算的结果，而不再次运行函数。

以上是“vue.js计算属性指的是什么”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页标题：vue.js计算属性指的是什么-创新互联
网站网址：https://www.cdcxhl.com/article10/dhhsdo.html

成都网站建设公司_创新互联，为您提供电子商务、网站导航、软件开发、企业建站、网站设计公司、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联