只显示名称的一部分，如果字符超过Vue.js

Question

这里的限制是我的小提琴：DEMO

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

我想在显示一旦用户登录的消息

在其中的字符数超过8个的情况下，我怎么能只显示名称后面加上“..”的前8个字符？ （如：蒙娜丽莎..）

Answer 1

这里是我的回答小提琴：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

你想要的检查，如果字符串> 8个字符，并在你的模板计算的属性修改和使用计算的属性。

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

您可以使用substr()方法，以获取名称的一部分：

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

或者你可以使用CSS overflow: hidden;和text-overflow: ellipsis;属性：demo。

Answer 4

您可以通过使用计算性能做到这一点。

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

如果你能做到这一点利用CSS，你应该。

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