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运算属性是啥？（代码示例）的具体内容，更多请关注百分百源码网其它相关文章！