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

最新推荐文章于 2024-07-09 22:17:47 发布

原创最新推荐文章于 2024-07-09 22:17:47 发布 · 9.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #java #html #mysql

本文介绍如何在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>

View Code

ellipsis方法表示，当字符串长度超过10，显示省略号。

打开网页，显示：