Vue中如何使用计算属性进行数据动态处理？

本文共计957个文字，预计阅读时间需要4分钟。

目录 + 1. 什么是计算属性 + 2. 计算属性的语法 + 3. 举例 + 1. 什么是计算属性 + 模板内的表达式非常便利，但它们的初衷是用于简单运算。在模板中过多使用逻辑会使得模板过重且难以维护。

目录

• 1、什么是计算属性
• 2.计算属性的语法
• 3.举例

1、什么是计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

例如：

<div id="app"> { <!-- -->{ message.split('').reverse().join('') }} </div>

在这个地方，模板不再是简单的声明式逻辑。而是在插值表达式中直接反转字符串，如果你在多处用到该反转字符串时，这样写就会很麻烦，增加消耗。所以，对于任何复杂逻辑，你都应当使用 计算属性 。

2.计算属性的语法

computed{ 函数（）{return //必须又返回值。