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

发布时间:2021-03-30 16:34:08编辑:admin阅读(115)

    一、概述

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


关键字