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

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

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

---

这是我的

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

您可以使用方法获取部分名称：

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

---

或者你可以使用CSS

overflow:hidden和
文本溢出：省略号属性：。
您可以使用计算属性来完成此操作

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

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


});

以下是我的答案：


欢迎，{{username}}
欢迎，{{username.substring（0,8）+.“}
如果你能用css做到这一点，你应该这样做

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

更新VUE 3

已从Vue 3中删除过滤器

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

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) + '...';
  }
}

适用于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) + '...';
});

Vue.filter（'str_limit'，函数（值、大小）{
如果（！value）返回“”；
value=value.toString（）；
如果（value.length这样想，它可以处理一行。并检查空值以避免”[Vue warn]：呈现中的错误：“TypeError:无法使用.substring（）读取null的属性“length”

{{ username && username.length < 8 ? username : username.substring(0,8)+".."  }}

{{username&&username.length<8？username:username.substring（0,8）+.“}
看一看很棒！在一行中更准确：{{username.length<50？username:username.substring（0,50）+“…”}。我认为最好将“逻辑”放在计算中，而不是放在模板中。它只在username已经在开始时起作用。但是如果username是通过一些后期查询得到的，它将是错误的“substring..of null”为什么否决投票？添加了一个编辑，希望现在一切正常：'（应该是验证答案！过滤器已从Vue 3.0中删除，不再受支持。
{{ $filters.str_limit(8) }}

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>

{{ username && username.length < 8 ? username : username.substring(0,8)+".."  }}