vue 根据字符串的长度控制显示的字数超出显示省略号
vue 根据字符串的长度控制显示的字数超出显示省略号
py3study
发布于 2021-04-01 14:55:52
发布于 2021-04-01 14:55:52
一、概述
经常会见到，标题或者字段超过多长，然后进行相关的截断，以下在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
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-03-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录