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

Question

I clashed with the problem when had written this code:

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

And it can't be parsed. Is it possible in Vue templates to split inine JS expressions? If yes - how?

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 .

Answer 2

I suggest you to use a computed property Computed

 var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div>