Help us understand the problem. What is going on with this article?

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でいいな……。

huigo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away