javascript - 如何使接收到的数据显示为 HTML 代码？

Question

我有一个带有名为 content 的 v-model 的 textarea。如果我在那里输入一些文本，它将被分配给 content.description。现在，我想将它传递给另一个元素，即 div，但是 - 棘手的部分来了 - 如果我的 textarea 包含一些 html 代码，我希望这个 html 代码被解释为 html 代码而不是文本。

例如，如果我输入

<a href="foo">Some link </a>

我将它传递给 div，我希望它被呈现为一个可点击的链接，比如

一些链接

而不是作为

<a href="foo">Some link </a>

有什么办法吗？

Answer 1

我们必须使用v-html指令才能工作。看看文档在这里，检查工作片段。

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: '<a href="google.com">Hello Vue!</a>'
  }
})

.as-console-wrapper{
  display:none!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.12/vue.js"></script>
<div id="app-6">
  <p v-html="message"></p>
  <textarea v-model="message"></textarea>
</div>

Answer 2

您可以使用 Vuev-html指令在 div 中插入 Html。

工作示例：

new Vue({
    el: '#app',
    data: {
        html: '<a href="foo">Some link </a>'
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<textarea v-model="html"></textarea>
<div v-html="html"></div>
</div>