1. 7kaji

    Posted

    7kaji
Changes in title
+truncate フィルタをつくる
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,40 @@
+長い文字列を省略したいときに フィルターほしくなると思います。
+
+Vue.js では、
+
+> グローバルな Vue.filter() を使用してカスタマイズしたフィルタを登録することができます。
+
+とのことです。
+
+## JS
+
+```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;
+ }
+ else {
+ return value.substring(0, length) + ommision;
+ }
+});
+```
+
+## html
+
+View 側ではこんな感じで使えると思います。
+
+```html
+<p>{{message |truncate 10 '。。。’}}</p>
+```
+
+## 結果
+
+```
+隣の客はよく牡蠣食う。。。
+```
+
+## REF
+カスタムフィルタ - vue.js : http://jp.vuejs.org/guide/custom-filter.html