アウトプットするブログ

ブログの投稿ログ

2021年
9月
8月
7月
6月

Vueで長文の文字列を省略してみ...

本日は業務で出てきた問題で、長文の文字列をフロント側でスライスして以下略する実装があったのでブログにしていきたいと思います。

今日のコード

codesandbox


<template>
  <div class="hello">
    <em>加工前</em>
    <p>{{ msg }}</p>

    <em>加工後</em>
    <p>{{ msg | omittedText }}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "HpesiTNueagEGBxmED5MBbCJtmSNimkZembb",
    };
  },
  filters: {
    // パイプの右側で指定した関数を定義
    omittedText(text) {
      // 画面幅が768以下の時に実行
      if (window.innerWidth <= 768) {
        // 対象の文字列が10文字より大きいのであればそれ以降に...を付与
        　　そうでないなら全文出力
        return text.length > 10 ? text.slice(0, 10) + "…" : text;
      } else {
        // 画面幅が768以上の時に全文出力
        return text;
      }
    },
  },
};
</script>

まとめ

filters: {}はデータを加工する時に使うもので、このように要素内の文字や数列によって使用するmustache 展開と

<div v-bind:id="rawId | formatId"></div>

のように使用するv-bind 式での二つで使用することができるようです。
今回の使用例では3点リーダの実装でしたがそれ以外にも消費税の計算や文字列のtrimメソッドで余白を削除したり汎用的に使える場面があるので覚えておくべきかと思います！