Edited at

Vue2.0とnl2br

More than 3 years have passed since last update.

vue2.0ではv-htmlに対してfilterが使えなくなりました。

これまで改行含むテキストに対して<p v-html="message | nl2br"></p>とやっていたものを、

どう修正するか試したメモです。


v-htmlとreplace

デモ


html

<p v-html="message.replace(/\n/g,'<br/>')"></p>


メリット : わかりやすい。

デメリット : エスケープされない。


v-forとsplit

デモ


html

  <div v-for="str of message.split('\n')">{{str}}</div>


メリット : エスケープされる。

デメリット : 改行が続くと空のdivが出たりと、出力されるhtmlが微妙。


関数型コンポーネント

デモ


html

  <nl2br tag="p" :text="message"></nl2br>



js

Vue.component('nl2br', {

functional: true,
props: ['tag','text'],
render: function (createElement, context) {
return createElement(context.props.tag,
context.props.text.split("\n").reduce(function(x,y){
if (!Array.isArray(x)){
return [x,createElement('br'),y];
}
return x.concat([createElement('br'),y]);
}));
}
});

メリット : エスケープされる。renderが使えて少し楽しい。

デメリット : renderめんどい


css

デモ


html

<p style="white-space: pre;" v-text="message"></p>


(折り返す時はwhite-space: pre-wrap;などを使う)

メリット : 楽。エスケープされる。

デメリット : ない。


まとめ

cssでいいのか……? cssでいいな……。