本文主要介绍Vue中的计算属性和模板中的表达式,用于简单操作。但是,模板中过多的逻辑会使模板过于沉重,难以维护。更多详情,我们在下面的文章中学习一下,有需要的朋友也可以参考一下。
:
目录
1.什么是计算属性2。计算属性的语法
3.例子
1、什么是计算属性
模板中的表达式非常方便,但它们最初是为简单操作而设计的。在一个模板中放入过多的逻辑会使它变得过于沉重,难以维护。
例如:
div id='应用程序'
{
!- { message.split(' ')。反转()。加入(“”)}}
/div
在这个地方,模板不再是简单的声明性逻辑。取而代之的是,在插值表达式中直接对反转后的字符串进行反转。如果很多地方用倒串,会很麻烦,增加消耗。因此,对于任何复杂的逻辑,都应该使用计算属性。
2.计算属性的语法
计算的{
函数(){return //必须再次返回值。}通常这个函数是一个get函数
}
3.例子
针对上面这个例子,我们可以这样写:
div id='应用程序'
p原始字符串:{
!- {mes}}/p
p反转字符串:{
!- {reverseMes}}/p
/div
让vm=new Vue({
埃尔:' #app ',
数据:{
mes:“说你好”
},
计算值:{
reverseMes(){
//计算属性中必须有返回值。
返回this.mes.split(' ')。反转()。联接(“”)
}
}
})
查看结果:
这里,我们在vue实例的computed计算属性中定义一个函数。函数的返回值就是我们需要的结果,可以直接在插值表达式中调用并渲染。
在举个例子,通过计算属性,让单词的首字母变大写:
div id='应用程序'
p原始字符串:{
!- {name}}/p
p初始资本:{
!- {toUpperCase}}/p
/div
在vue实例的computed calculation属性中,自定义我们的calculation属性,并通过获取字符串的第一个字符并将其大写,将它与拆分后的剩余字符连接起来:
埃尔:' #app ',
数据:{
姓名:“汤姆”
},
//计算属性
计算值:{
//自定义计算属性
toUpperCase(){
返回this.name.charAt(0)。toUpperCase()。concat(this.name.slice(1,3))
}
}
输出结果为:
计算属性还有两个很实用的小技巧容易被忽略:首先,计算属性可以依赖于其他计算属性;第二,计算属性不仅可以依赖于当前Vue实例的数据,还可以依赖于其他实例的数据,
例如:
div id='app1'/div
div id='app2 '
{
!- {reverseMes}}
/div
让vm1=新Vue({
埃尔:' #app1 ',
数据:{
mes:“你好”
}
})
让vm2=新Vue({
埃尔:' #app2 ',
计算值:{
reverseMes(){
//使用实例vm1中数据中心的mes来反转字符串。
返回vm1.mes.split(“”)。反转()。联接(“”)
}
}
})
查看结果:
也可以使用vm1、vm2计算属性中的数据。
用户自定义的计算属性不仅可以用在插值表达式中,还可以用在v-bind:属性绑定中,用来做一些样式变换等等。
关于Vue中计算属性介绍的这篇文章到此为止。有关Vue计算属性的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。