英文:
Is there any library or package to show and real time edit in vuejs?
问题
我想在Vue.js模板中像下面这样显示我的一部分代码。
那么，我如何添加一些代码片段，并让用户实时编辑它们，并在上面呈现输出。
英文:
I want to show my portion of code in vuejs template just like below.
So, How can I add show some piece of code & also let the user realtime edit there & render the output above.
答案1
得分: 1
"Run following snippet!" -- 在文本框中输入内容，标题将相应更改。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
new Vue({
el: "#app",
data: {
title: "Hello!"
}
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
注意：以上是您提供的代码段的翻译。
英文:
Run following snippet! -- Type something in textbox it will change the title accordingly.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
new Vue({
el:"#app",
data:{
title:"Hello!"
}
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论