Vue.jsで文字省略フィルタを作る

長い文字列を省略したいことって結構ありますよね。

「文字数省略」の画像検索結果

こんな感じのコンマなんかでの省略です。

<script>内のexport default内にfiltersを定義します。

export default { 
filters: {
    truncate: function(value) {
      var length = 20;
      var ommision = "...";
      if (value.length <= length) {
        return value;
      }
      return value.substring(0, length) + ommision;
    }
  },
}

で、使用するタイミングで

<p>{{msg | truncate}}</p>

という様に使うことで実現できます。

グローバルで定義する場合は以下の記事が参考になります。

https://qiita.com/7kaji/items/a280c6b5353efa0a7c35

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です