本文主要介绍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))

}

}

输出结果为：

计算属性还有两个很实用的小技巧容易被忽略：

例如：

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计算属性的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！