Question

这是我的小提琴：DEMO

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

我尝试在用户登录后显示消息。

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

Answer 1

您也可以注册filter。

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

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

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

你想要一个计算属性来检查字符串是否是＆gt; 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 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

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

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

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

Answer 6

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

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

Answer 7

以这种方式可以处理一行。并检查空值以避免'[Vue警告]：渲染时出现错误：“ TypeError：无法使用.substring（）读取属性'length'of null'”

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

Answer 8

您可以使用以下代码吗？

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

玩得开心：）

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

8 个答案: