【学習メモ】動かして学ぶ！Vue.js 開発入門 その7

Chapter9 Markdownエディタを作ってみよう

02 Markdownエディタを作る

  <div id="app">
    <textarea v-model="input"></textarea>
    <div v-html="convertMarkdown"></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js"></script>

new Vue({
  el: "#app",
  data: {
    input: ''
  },
  computed: {
    // inputが変わったら、convertMarkdownを算出する
    convertMarkdown: function () {
      return marked(this.input);
    }
  }
});

結果

昔作った type tester もVue.js使えばわりとキレイにできそうな気がします。