Display only a part of the name if characters exceed a limit in Vue.js

Question

I am trying to display a message once the user logs in.

In the case where number of characters exceed 8, how can I display only the first 8 characters of a name followed by ".." ? (Eg: Monalisa..)

new Vue({
    el: '#app',
    data: {
        username: 'AVERYLONGGGNAMMEEE'
    }
});

Here is my jsfiddle demo

Answer 1

Here is my answer fiddle : ANSWER-DEMO

<div id="app">
  <div v-if="username.length<8">Welcome, {{ username }}</div>
  <div v-else>Welcome, {{ username.substring(0,8)+".." }}</div>
</div>