在前面的学习当中，学会了如何用文本插值输出数据。但如果我们需要根据某些规则或逻辑输出数据呢？在这种情况下，我们可以通地Vue中的计算属性，根据某些规则或逻辑输出数据。这种方式也很方便，但除了这些方式之外，还可以嵌入JavaScript的逻辑函数。有的时候我们还会从远程服务获取数据，使用前面提到的方式也是可以。那么，今天 我们学习一个新方法，使用methods属性向Vue实例引入新属性。该属性应该包含一个对象，其中键（key）为函数的名称，值（value）为函数本身。

在介绍methods之前，咱们先简单的回忆一下。比如我们有下面这个示例，我们的data数据中，有两个属性：firstName和lastName。我们的目的是输出一个fullName。

let app = new Vue({
    el: '#app',
    data () {
        return {
            firstName: 'Airen',
            lastName: 'Liao'
        }
    }
})

比如我们要在页面中输出全名，我们有两种方式，一种是文本插值方式：

<div id="app">
    <h1>{{ firstName }} {{ lastName }}</h1>
</div>

可以看到输出我们需要的fullName，也就是"Airen Liao"：

除了文本插值的方式之外，我们还可以使用Vue中的computed属性，可以在computed中创建一个fullName方法。其中键名就是函数名，比如fullName，而键值是函数：

let app = new Vue({
    el: '#app',
    data () {
        return {
            firstName: 'Airen',
            lastName: 'Liao'
        }
    },
    computed: {
        fullName: function () {
            return this.firstName + ' ' + this.lastName
        }
    }
})

这个时候，我们在元素中插入fullName，如下：

<div id="app">
    <h1>{{ fullName }}</h1>
</div>

最终输出的也是我们希望要的结果。

如果你从未接触Vue中的计算属性computed，建议你点击这里或这里进行了解。

除了上面两种方式，我们还可以添加一个方法，即函数，它也可以为我们做这个。

正如前面提到的，函数必须在Vue中的methods属性下添加，这个有点类似于Vue中的计算属性computed。在Vue中，把methods被命名为方法，它也是让我们调用在对象上下文中的函数，它可以操作对象中包含的数据。在我们这个示例，对象其实就是Vue实例。

let app = new Vue({
    el: '#app',
    data () {
        return {
            firstName: 'Airen',
            lastName: 'Liao'
        }
    },
    methods: {

    }
})

该对象中的键将是方法的名称。在本例中，fullName就是methods的方法名，其值就是一个函数：

let app = new Vue({
    el: '#app',
    data () {
        return {
            firstName: 'Airen',
            lastName: 'Liao'
        }
    },
    methods: {
        fullName: function () {

        }
    }
})

实际上，Vue中的方法可用做很多事情，但是现在我们这个示例中的方法只返回一个字符串值，它可以通过文本插值来输出。那么，我们如何访问该方法中的数据属性呢？Vue代理的数据和方法在此上下文中都可用，所以this.firstName就是访问了data中的firstName