[Vuejs]-How to split inline JS expressions by lines in vue templates?

by

4👍

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.

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>

Leave a comment