BETA

vue.jsでtextareaに入力html文書を作る

投稿日:2020-07-19
最終更新:2020-07-19
    <div id="app">  
        <span>Multiline message is:</span>  
        <p v-html="content"></p>  
        <br>  
        <textarea v-on:input="onInput" v-bind:value="content"></textarea>  
    </div>  

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script src="./form.js"></script>  

公式によると,textareaは,v-on:inputでイベントを取るらしい。
普通に{{ content }}と書くとhtmlタグがエスケープされてしまうので,v-htmlを使う。

var app = new Vue({  
  el: '#app',  
  data: {  
     content: "aaabbb"  
  },    
    methods: {  
        onInput: function(e){  
          var myStr = e.target.value;// イベント元のtextareaの値  
          this.content = myStr.replace(/#1/g,"<h1>") ;// 「#1」を<h1>に置換する。  
        }     
    }     
})  

#1と入力すると,inputイベントで,自動的に<h1>タグに変換する。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@mihiraTakashiの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう