只顯示名稱的一部分，如果字符超過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;