vueでv-htmlを利用して分番でテキストを改行する例

最近開発する時、このような必要があります。テキストをセミコロン（中国語のセミコロンと英語のセミコロンがあります）で改行します。
以下のとおりです
改行前：雷軍、2457.6万人、自然人株主；洪鋒、169.51万、自然人株主；黎万強、10.33万、自然人株主。
改行後:
雷軍、2457.66万人、自然人株主。
洪鋒、169.51万、自然人株主；
黎万強、10.33万、自然人株主。
表示されているhtml

<p class="bgnr-txt" v-html="change(content)">

js:

methods:{
 change:function(content){
  content = content.replace(/;/g,";</br>");
  content = content.replace(/；/g,"；</br>");
  return content;
 }
},

このように書いてもいいです。

methods:{
 change:function(content){
  var reg = /[;；]/g;
  content = content.replace(reg,"$&\r
");
  return content;
 }
},

しかし、書き込みの過程では、コンソール出力はすでに変換されましたが、ページで見た効果はまだ変換されていません。その後、現在のページにwhite-spaceを追加する必要があることが分かりました。pre-wrap。のスタイルは、以下の通りです。

<p class="bgnr-txt" style="white-space: pre-wrap;" v-html="change(content)">

これで問題は解決された。
以上のvueでv-htmlを利用してテキストを改行した例は小編集が皆さんに共有する内容です。参考にしていただければと思います。よろしくお願いします。