专栏首页python3vue 根据字符串的长度控制显示的字数超出显示省略号

vue 根据字符串的长度控制显示的字数超出显示省略号

一、概述

经常会见到,标题或者字段超过多长,然后进行相关的截断,以下在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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html

    lin_zone
  • CSS控制文字,超出部分显示省略号

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

    山河木马
  • JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案。

    wfaceboss
  • css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或...

    smy
  • JavaScript截取字符串限制显示字数加省略号摘要

    虽然 CSS 可以设置超出部分隐藏,但是出于用户体验考虑,还是截取字符串比较顺眼。

    德顺
  • css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字。这在列表条目,题目,名称等地方常用到。

    AlexTao
  • HTML内超过多少像素以省略号显示

            时间过的很快,转眼来到了2013年,我在北京工作也一年有余,静下心来,回头想想,自己貌似一年内没有成长多少,或者说成长的很少,反正自己没有看到,...

    高爽
  • 前段:可能是最全的 “文本溢出截断省略” 方案合集

    在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断...

    用户4962466
  • 前段:可能是最全的 “文本溢出截断省略” 方案合集

    在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断...

    用户4962466

扫码关注云+社区

领取腾讯云代金券