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

骑猪看日落 2022-11-07 13:13 216阅读 0赞

# 一、概述 #

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

[https_segmentfault.com_a_1190000019602889_utm_source_tag-newest]: https://segmentfault.com/a/1190000019602889?utm_source=tag-newest

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关超出部分显示省略号

单行 { overflow: hidden; white-space: nowrap; text-overflow: elli

太过爱你忘了你带给我的痛/ 2022年12月17日 04:26/ 0 赞/ 169 阅读

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

一、概述经常会见到，标题或者字段超过多长，然后进行相关的截断，以下在vue当中，使用了vue的过滤器，很好的解决了这问题。二、代码实现 test.vue

骑猪看日落/ 2022年11月07日 13:13/ 0 赞/ 217 阅读

相关 CSS控制文字只显示一行，超出部分显示省略号

之前使用过这个例子，现在总结说明一下：先给贴代码： <table> <tbody> <tr> <td><code>01</code></td>

ゞ浴缸里的玫瑰/ 2022年08月11日 16:57/ 0 赞/ 300 阅读

相关 html中文字长度超出宽度如何显示省略号“...”

如下图： ![20150410180215360][] 一般只用设置以下四个属性即可（当然还有宽度和高度）： white-space:nowrap;

「爱情、让人受尽委屈。」/ 2022年08月07日 12:51/ 0 赞/ 334 阅读

相关 jsp:超出字数显示省略号；鼠标悬停显示完整文本

\\ 一. 需求： \\ 列表页中，控制某一列中的文字显示：只显示前16个字符，超出部分用省略号代替。当鼠标悬停时，显示该列的全部内容。 \\ 二. 解决方案

朴灿烈づ我的快乐病毒、/ 2022年06月12日 07:08/ 0 赞/ 714 阅读

相关用css控制table文字溢出显示省略号控制td显示字数

table{ width:100px; table-layout:fixed;/ 只有定义了表格的布局算法为f

缺乏、安全感/ 2022年05月31日 09:10/ 0 赞/ 591 阅读

相关 css控制超出一行内容显示省略号

前言：在前端开发过程中，经常会遇到文字超过一行内容的情况，要求隐藏超出部分并且以省略号显示。解决方法：使用以下css代码即可解决这个需求： whi

矫情吗；*/ 2022年05月17日 12:21/ 0 赞/ 443 阅读

相关 php 字符串超出限定显示省略号

<?php header("Content-type:text/html;charset=utf-8"); $str="帖子已锁定,无法回复！帖子已锁

绝地灬酷狼/ 2021年10月01日 09:28/ 0 赞/ 397 阅读

相关 css 超出长度显示省略号 text-overflow: ellipsis;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

ゝ一世哀愁。/ 2021年09月23日 22:58/ 0 赞/ 398 阅读

相关解决Vue中根据字符串的长度控制显示数字部分显示省略号

解决Vue中根据字符串的长度控制显示数字部分显示省略号问题： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

阳光穿透心脏的1/2处/ 2021年09月07日 06:12/ 0 赞/ 949 阅读