前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue 根据字符串的长度控制显示的字数超出显示省略号

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

作者头像
py3study
发布2021-04-01 14:55:52
5.9K0
发布2021-04-01 14:55:52
举报
文章被收录于专栏:python3python3

一、概述

经常会见到,标题或者字段超过多长,然后进行相关的截断,以下在vue当中,使用了vue的过滤器,很好的解决了这问题。

二、代码实现

test.vue

代码语言:javascript
复制
<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,显示省略号。

打开网页,显示:

代码语言:javascript
复制
我的家在东北松花江上...

本文参考链接:

https://segmentfault.com/a/1190000019602889?utm_source=tag-newest

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-03-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、概述
  • 二、代码实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档