Vue.js で truncate フィルタをつくる #JavaScript

長い文字列を省略したいときにフィルターほしくなると思います。

Vue.js では、

グローバルな Vue.filter() を使用してカスタマイズしたフィルタを登録することができます。

とのことです。

JS

Vue.filter('truncate', function(value, length, omission) {
  var length = length ? parseInt(length, 10) : 20;
  var ommision = omission ? omission.toString() : '...';

  if (value.length <= length) {
    return value;
  }

  return value.substring(0, length) + ommision;
});

html

View 側ではこんな感じで使えると思います。

<!-- 'msg' => '隣の客はよく柿食う客だ' -->
<p>{{msg | truncate 5 '。。。'}}</p>

結果

隣の客はよ。。。

REF

カスタムフィルタ - vue.js