Afficher seulement une partie du nom si les caractères dépassent une limite dans Vue.js

Question

Voici mon violon. DEMO

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

Je suis en train d'afficher un message une fois l'utilisateur se connecte à

En le cas où le nombre de caractères dépasse 8, comment puis-je afficher seulement les 8 premiers caractères d'un nom suivi de ".."? (Par exemple: Monalisa ..)

Answer 1

Voici mon violon réponse: ANSWER-DEMO

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

Answer 2

Vous voulez une propriété calculée qui vérifie si la chaîne est> 8 caractères et apporter des modifications et utiliser cette propriété calculée dans votre modèle.

new Vue({ 
    el: '#app', 
    data: { 
    username: 'AVERYLONGGGNAMMEEE' 
    }, 
    computed: { 
    usernameLimited(){ 
     if (this.username.length > 8) { 
     return this.username.substring(0,8) + '...' 
     } else { 
     return this.username 
     } 
    } 
    } 
}) 

Answer 3

Vous pouvez utiliser la méthode substr() pour obtenir une partie du nom:

var namePart = this.username.substr(0, 8) + '..'; 

Vous pouvez également utiliser les propriétés CSS overflow: hidden; et text-overflow: ellipsis;: demo.

Answer 4

Vous pouvez le faire en utilisant des propriétés calculées.

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

computed: { 
    strippedUsername: function(){ 
     if(this.username.length > 5) { 
     return this.username.slice(0,4); 
     } 
     return this.username; 
    } 
} 


}); 

Answer 5

Si vous pouvez le faire avec css, vous devriez.

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;