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