最近项目中因前台页面展示时某个字段过长导致页面样式变形,所以需要对过长的字段进行省略展示,比如字数超过25则只显示前25个字,后面的则用'...'代替。
根据网上查找方法,选用了Vue.js的过滤器——filter。
它可以某个组件中定义:
filters:{
ellipsis:function(value){
if (value.length > 25){
return value.slice(0, 25) + "..."
}else{
return value
}
}
}
也可以进行全局定义(这里需要注意的,全局过滤器的写法是filter,没有s,而组件中过滤器的写法是filters,是有s的):
Vue.filter('ellipsis', function (value) {
if (value.length > 25){
return value.slice(0, 25) + "..."
}else{
return value
}
})
new Vue({
// ...
})
定义过滤器后,可以用如下方法使用:
<!-- 在双花括号中 -->
<td>{{value.project_address | ellipsis}}</td>
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
效果展示: