vue的计算属性和方法有什么区别,vue计算属性写法,Vue中的计算属性介绍

vue的计算属性和方法有什么区别,vue计算属性写法,Vue中的计算属性介绍

本文主要介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: