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，顯示省略號。

 

打開網頁，顯示：

我的家在東北松花江上...

 

注意，對於v-html，過濾規則寫在filters是不生效的，需要寫在methods里面才行。

使用時，示例如下：

v-html="ellipsis(value)"

 

 

本文參考鏈接：

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