Vue项目的基本知识（一）

计算属性(computed)

要实现一些如下图简单的数据拼接或计算可以有下面几种方法，如图：

html
	<h1>{{ surname + ' ' + name }}</h1>
    <h1>{{ surname }} {{name}}</h1>
    <h1>{{getFullName()}}</h1>
    <h1>{{fullName}}</h1>

js
export default {
  name: 'HelloWorld',
  data () {
    return {
      surname: 'yang',
      name: 'jun'
    }
  },
  computed:{
    fullName: function(){
      return this.surname + ' ' + this.name
    }
  },
  methods:{
    getFullName: function(){
      return this.surname + ' ' + this.name
    }
  }
}

解释：在计算逻辑不怎么复杂并且页面中复用的次数不多时，methods与computed都可以使用，而在使用简单的表达式对内容进行简单的转换与使用过滤器对内容进行简单的转换建议使用computed

1、methods与computed中都是存放函数；

2、computed中放含有计算属性的函数；

3、在computed中的函数在使用时不需要加（），如上图中{{fullName}}；而在methods

中的函数使用都需要加（），如上图中{{getFullName()}}；

4、对于一个函数如果只需要一个计算结果，就使用computed;