computed计算属性使用

计算属性：
代码：

<template>
  <div id="computedBox">
      <!-- 使用拼接的方法，可读性不佳，多个的话写起来繁琐 -->
      <h2>{{firstName + ' ' + lastName}}</h2>
      <h2>{{firstName}} {{lastName}}</h2>
      <!-- 可以调用方法显示，不过不够简洁 -->
      <h2>{{getFullName()}}</h2>
      <!-- 计算属性，直接mustache语法显示新的值 -->
      <h2>{{fullName}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
       firstName:'Lit',
       lastName:'Jenney',
    };
  },
//   计算属性，是一个属性
  computed:{
      fullName(){
          return this.firstName + ' ' + this.lastName
      }
  },
  methods:{
    //   通过方法获取值，里面的值需要加this
      getFullName(){
          return this.firstName + ' ' + this.lastName
      }
  }
};
</script>

<style scoped>

</style>