Vue 2.0的学习笔记:Vue的Methods

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

在介绍methods之前,咱们先简单的回忆一下。比如我们有下面这个示例,我们的data数据中,有两个属性:firstNamelastName。我们的目的是输出一个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的Methods

除了文本插值的方式之外,我们还可以使用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

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/working-with-methods-in-vue.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部