Есть ли какая-либо библиотека или пакет для показа и редактирования в реальном времени в vuejs?

Question

Я хочу показать свою часть кода в шаблоне vuejs, как показано ниже.

Итак, как Могу ли я добавить показать некоторый фрагмент кода, а также позволить пользователю редактировать в реальном времени там и визуализировать вывод выше.

Answer 1

Запустить следующий фрагмент! - Введите что-нибудь в текстовое поле, оно соответствующим образом изменит название.

new Vue({
  el:"#app",
  data:{
    title:"Hello!"
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div class="alert alert-success" id="app" role="alert">
  <h4 class="alert-heading">{{ title }}</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
  
  Change Title : <input type="text" v-model="title">
  
</div>