经常会见到,标题或者字段超过多长,然后进行相关的截断,以下在vue当中,使用了vue的过滤器,很好的解决了这问题。
test.vue
<template>
<div class="title">{{ name | ellipsis}}</div>
</template>
<script>
export default {
name: "test",
data(){
return {
name:'我的家在东北松花江上du, 那里有森林煤zhi矿, 还有那满山遍dao野的大豆高梁. ',
}
},
filters:{
ellipsis(value){
if (!value) return '';
if (value.length > 10) {
return value.slice(0,10) + '...'
}
return value
}
}
}
</script>
<style scoped>
</style>
ellipsis方法表示,当字符串长度超过10,显示省略号。
打开网页,显示:
我的家在东北松花江上...
本文参考链接:
https://segmentfault.com/a/1190000019602889?utm_source=tag-newest