Gateway未経験・駆け出しエンジニアのためのブログです。就活や転職、プログラミングスクール、技術について記します。2019.11.16みなさんこんにちは、長谷川です。今回は、Vue.jsの改行方法について記していきます。v-htmlなどを使用すれば簡単にできるのですが、クロスサイトスクリプティングができてしまうので、セキュリティ面でかなり不安です。明らかに面倒臭いです。v-textを使った上で改行する方法をみていきましょう。改行するための一つの方法です。使用して生じた弊害は、自己責任でお願い致します。置き換えた新しい文字列を返します。文字列または各マッチで呼び出される関数です。文字列の場合、最初に一致した箇所のみを置き換えます。引用:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceつまり、replaceメソッドを使用してtextareaの改行(\n)を何か別の文字列に変換して最終的にその文字列を(\n)に変えてあげれば、改行することが可能です。自分の処理の流れ私の処理の流れをご説明します。簡単に流れを説明しますと、テキストボックスで入力した値をDB経由でフロントに表示したいという感じです。改行する方法を書いていきます。nを改行コードに変換します。content.replace(/\\n/g,'\n');3、CSSでwhite-space:preをセットします。white-space:pre-line;この3つをすることで、テキストボックス内の値を改行することができます。以上で説明を終わります。プログラミングのスキルアップをしたい方は?TECH::CAMPでは、プログラミングを全く触れていない方やプログラミング学習をしている方もWebアプリケーション開発に必要なスキルを学ぶことができます。プログラミングなど専門的な技術の学習は、独学では厳しい場合もあります。自分の中でPDCAサイクルを回し、さらに成長ができます。未経験者や実務経験がない方で最も苦しむのは、駆け出しのときだと思います。環境構築やプログラミングをどう使うのかなどを理解していないと思うように開発ができません。TECH::CAMP(テックキャンプ)の公式サイトはこちらおわりにテキストボックスを改行させて表示する方法はたくさんありますが、Vue.jsのv-textを使用した際に改行されない場合があるのでそういった場合は、ぜひ試してみてください。上記の方法は楽に実装できますが、デメリットがユーザがテキストボックスで\nを入力すると改行されてしまうことですかね。Twitterでは、どのように実装されているか興味が湧きますね。二つ連続していたら片方は不要にするようなやり方をしてそうです。良い方法があればコメントでご教授ください。最後まで読んでいただき、ありがとうございました。Gateway関連記事JavaScript【jQuery】画面全体に背景色をつける方法のご紹介。画面サイズにbackgroundを指定する方法を記します。スマホやパソコンの画面全体のサイズ分背景をセットする方法です。要素の背景色をセットするという方法です。...JavaScript【Vue.js】CDNにホストされているVue.jsを読み込む方法と使い方!今回は、Vue.jsのCDN版を利用した方法を記します。Vue.jsのCDN版を利用する。CDN版のVue.jsを利用したサンプルソースです。用途によっては、JavaScript内で制御したい場合が出ると思います。英語力にコミットするphpのcurlで400_Bad_Requestが出る原因と解決法!プログラミングスクール無料体験・カウンセリングを徹底比較。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【Vue.js】v-textでTextarea(テキストボックス)の中身を改行する方法!2019.11.162020.01.02IT系の専門学校とプログラミングスクールの違いは?どっちがいいのか2019.09.022019.09.18fontawesomeアイコンがiPhoneで表示されないときの対処法を記します。2019.10.272019.12.31【パスワードのハッシュ化】PHPでpassword_hashを使った認証方法のご紹介。2020.01.04【2020年版!】本気でおすすめしたいプログラミングスクール7選のご紹介。2020.01.07関連記事BootstrapのモーダルがJavaScriptで表示できないときに確認すべき事項!2019.09.062019.09.10【jQuery】画面全体に背景色をつける方法のご紹介。スマホやPCの画面全体指定。転職すべきブラック会社の特徴5選!該当したら即転職。2020.02.26会社を続けながら通えるプログラミングスクールは?短期集中型なカリキュラム。2020.02.25【無職必見】時間の使い方は?時間を有効活用する方法とは。2020.02.23【注意】未経験者がプログラミングの独学で転職する場合に気を付けることをご紹介します。【Vue.js】CDNにホストされているVue.jsを読み込む方法と使い方!2020.01.04【jQuery】画面全体に背景色をつける方法のご紹介。スマホやPCの画面全体指定。転職すべきブラック会社の特徴5選!該当したら即転職。プログラミングの独学で転職する場合に気を付けることをご紹介します。お金をかけずプログラミングスクールに通いたいあなたに伝えたいおすすめのスクール!最近のコメント未経験者が学ぶべきプログラミングの言語紹介。会社を続けながら通えるプログラミングスクールは?短期集中型なカリキュラム。【無職必見】時間の使い方は?時間を有効活用する方法とは。【2020年版!】本気でおすすめしたいプログラミングスクール7選のご紹介。プログラマーやエンジニアが向いていない人の特徴とは?未経験者ほど気を付けるべきこと。プログラミングスクール無料体験・カウンセリングを徹底比較。【2020年版!】本気でおすすめしたいプログラミングスクール7選のご紹介。プログラミングスクール無料体験・カウンセリングを徹底比較。【jQuery】画面全体に背景色をつける方法のご紹介。スマホやPCの画面全体指定。【Vue.js】v-textでTextarea(テキストボックス)の中身を改行する方法!2019.11.162020.01.02IT系の専門学校とプログラミングスクールの違いは?どっちがいいのか2019.09.022019.09.18fontawesomeアイコンがiPhoneで表示されないときの対処法を記します。2019.10.272019.12.31【パスワードのハッシュ化】PHPでpassword_hashを使った認証方法のご紹介。2020.01.04【2020年版!】本気でおすすめしたいプログラミングスクール7選のご紹介。アーカイブ2020年2月32020年1月92019年12月62019年11月32019年10月22019年9月32019年8月32019年7月2メタ情報ログイン投稿フィードコメントフィードWordPress.org自己紹介はじめまして、長谷川と申します。Webエンジニアをしております。お仕事をメインでしております。【Vue.js】v-textでTextarea(テキストボックス)の中身を改行する方法!2019.11.162020.01.02IT系の専門学校とプログラミングスクールの違いは?どっちがいいのか2019.09.022019.09.18fontawesomeアイコンがiPhoneで表示されないときの対処法を記します。2019.10.272019.12.31【パスワードのハッシュ化】PHPでpassword_hashを使った認証方法のご紹介。2020.01.04【2020年版!】本気でおすすめしたいプログラミングスクール7選のご紹介。転職すべきブラック会社の特徴5選!該当したら即転職。2020.02.26会社を続けながら通えるプログラミングスクールは?短期集中型なカリキュラム。2020.02.25【無職必見】時間の使い方は?時間を有効活用する方法とは。2020.02.23【注意】未経験者がプログラミングの独学で転職する場合に気を付けることをご紹介します。【jQuery】画面全体に背景色をつける方法のご紹介。スマホやPCの画面全体指定。転職すべきブラック会社の特徴5選!該当したら即転職。プログラミングの独学で転職する場合に気を付けることをご紹介します。お金をかけずプログラミングスクールに通いたいあなたに伝えたいおすすめのスクール!最近のコメント未経験者が学ぶべきプログラミングの言語紹介。会社を続けながら通えるプログラミングスクールは?短期集中型なカリキュラム。【無職必見】時間の使い方は?時間を有効活用する方法とは。【2020年版!】本気でおすすめしたいプログラミングスクール7選のご紹介。プログラマーやエンジニアが向いていない人の特徴とは?未経験者ほど気を付けるべきこと。プログラミングスクール無料体験・カウンセリングを徹底比較。【2020年版!】本気でおすすめしたいプログラミングスクール7選のご紹介。プログラミングスクール無料体験・カウンセリングを徹底比較。【jQuery】画面全体に背景色をつける方法のご紹介。スマホやPCの画面全体指定。【Vue.js】v-textでTextarea(テキストボックス)の中身を改行する方法!2019.11.162020.01.02IT系の専門学校とプログラミングスクールの違いは?どっちがいいのか2019.09.022019.09.18fontawesomeアイコンがiPhoneで表示されないときの対処法を記します。2019.10.272019.12.31【パスワードのハッシュ化】PHPでpassword_hashを使った認証方法のご紹介。2020.01.04【2020年版!】本気でおすすめしたいプログラミングスクール7選のご紹介。アーカイブ2020年2月32020年1月92019年12月62019年11月32019年10月22019年9月32019年8月32019年7月2メタ情報ログイン投稿フィードコメントフィードWordPress.org自己紹介はじめまして、長谷川と申します。Webエンジニアをしております。お仕事をメインでしております。連絡先hasebusinessmail@gmail.com固定ページプライバシーポリシースポンサーリンクタイトルとURLをコピーしました。