javascript - 如何在vue模板中按行分割内联JS表达式？

Question

在编写这段代码时，我遇到了这个问题:

<span
  class="deal-card__cost"
>{{ deal.total_cost | currency(
                        '₽',
                        0,
                        {
                          thousandsSeparator: ' ',
                          symbolOnLeft: false,
                          spaceBetweenAmountAndSymbol: true
                        }
                      ) | placeholder('- - -') }}</span>

并且无法解析。 Vue 模板中是否可以拆分 inine JS 表达式？如果是 - 怎么办？

Answer 1

From the guide :

In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain.

For example:

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

At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays message in reverse. The problem is made worse when you want to include the reversed message in your template more than once.

That’s why for any complex logic, you should use a computed property.