如果字符超出Vue.js中的限制，则仅显示名称的一部分

Question

这是我的小提琴：DEMO

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

用户登录后，我试图显示一条消息。

在字符数超过8个的情况下，如何仅显示名称的前8个字符，后跟“ ..”？（例如：蒙娜丽莎。）

Answer 1

更新 VUE 3

过滤器已从 Vue 3 中删除。

使用 Vue3，globalProperties如果您希望能够在多个组件中使用一个函数，则必须使用。

app.config.globalProperties.$filters = {
  str_limit(value, size) {
    if (!value) return '';
    value = value.toString();

    if (value.length <= size) {
      return value;
    }
    return value.substr(0, size) + '...';
  }
}

像这样使用它：

{{ $filters.str_limit(8) }}

对于 Vue 2

您还可以注册过滤器。

您可以简单地在您的项目中重复使用该功能。

Vue.filter('str_limit', function (value, size) {
  if (!value) return '';
  value = value.toString();

  if (value.length <= size) {
    return value;
  }
  return value.substr(0, size) + '...';
});

像这样使用它：

<div id="app">
  <div>Welcome, {{ username | str_limit(8) }}</div>
</div>

Answer 2

这是我的答案小提琴：答案演示

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

Answer 3

您可以通过使用计算属性来执行此操作。

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 4

您需要一个计算属性来检查字符串是否大于 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
      }
    }
  }
})