特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在前面的学习当中,学会了如何用文本插值输出数据。但如果我们需要根据某些规则或逻辑输出数据呢?在这种情况下,我们可以通地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中的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
如需转载,烦请注明出处:https://www.w3cplus.com/vue/working-with-methods-in-vue.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!