前端Vue2.6: 通过Vue过滤器filters实现“超出字符串长度显示省略号”

1,129 阅读1分钟
vue:2.6
typescript:3.6.4
cli3

通过Vue过滤器filters实现“超出字符串长度显示省略号”

过滤器的用法:

在以下举例中{{item.source | ellipsis}} : item.source作为过滤函数的value值,ellipsis作为过滤函数;

@Component({components:{},
filters:{
	ellipsis(value:string):string{
		  let len=value.length;
		  if (!value) return ''
		  if (value.length > 20) {
		  	return value.substring(0,8) + '......' +value.substring(len-8,len)
		  }
		  return value
		  }
}
})

<li style="padding: 10px 5px;" v-for="item in homePageNews" class="infinite-list-item">[{{item.source | ellipsis}}] {{item.title | ellipsis}}</li>