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

Question

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

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

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

这是我的 jsfiddle 演示

原文由 Inchara Raveendra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我的答案小提琴： ANSWER-DEMO

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

原文由 Inchara Raveendra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

更新 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>

原文由 Jeremy 发布，翻译遵循 CC BY-SA 4.0 许可协议