谈一谈对Vue计算属性computed的初步认识，及用法心得。_config引入的常量放在computed里-优快云博客

本文深入探讨Vue.js中计算属性的使用方法与优势，通过实例展示如何利用计算属性处理复杂逻辑，实现数据的高效管理和视图的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js在模板表达式中限制了，绑定表达式最多只能有一条表达式，但某些数据需要一条以上的表达式运算实现，此时就可以将此数据放在计算属性（computed）当中。

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

关于computed的详细解释和用法实例可参照文档计算属性和监听器。

举一个简单的例子：

在页面中显示一段时间数据如：2018-11-29 16:03:19，那么由于排版原因，我们想将他分为两行显示。那么可以使用计算属性。

我们声明两个计算属性如下：

  methods: {
//    方法写在这里，data为我们传递的值
        settlement_real_time0(data){
            return data.substring(0,10)
        },
        settlement_real_time1(data){
            return data.substring(10,19)
        }
    },

这样，在向元素绑定数据时，我们可以直接将处理过的数据展示在页面上，达到我们想要的效果。

<span class="date-box">
      //其中s.settlement_real_time是我要拆分的时间数据。
     <div>{{settlement_real_time0(s.settlement_real_time)}}</div>
     <div>{{settlement_real_time1(s.settlement_real_time)}}</div>
</span>

我对computed的理解就是声明一个函数，帮助我们处理一些不适用绑定在模板中的复杂逻辑。除了上例简单的用法，计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

所以，对于任何复杂逻辑，你都应当使用计算属性。

突然发现我写错了，也理解错了。。。。我把计算属性的方法写在了methods里，结果完美运行了。。发现错误后把它放回computed里结果报错了，无法接受参数。于是换了种写法让他在computed中也能使用。代码如下：

computed: { 
    settlement_real_time0(data){
          return function (data){
              return data.substring(0,10)
         }
     },
    settlement_real_time1(data){
            return function (data){
                return data.substring(10,19)
            }
     }
 },