Question

我正在尝试使用以下代码传递exp的值。但是，selectedChannel.explanation的形式是“＆lt; b＆gt;频道名称＆lt; / b＆gt;”。我怎样才能将exp显示为频道名称？

computed: {
    channel: {
        get() {
            const selectedChannel = this.$store.getters.selectedChannel;
            return selectedChannel ? selectedChannel.explanation : '';
        }

以下是模板的部分内容

<div class="channels">
      <textarea
      v-model="channel">
      </textarea>
</div>

Answer 1

给予输入标签（也是textarea）的任何值都将被视为string。
要在textarea标记中显示频道名称，您可以执行此操作

computed: {
    channel: {
        get() {
            const selectedChannel = this.$store.getters.selectedChannel;
            // using regex to match the text between "b" tag
            const channelName = selectedChannel.match("<b\b[^>]*>(.*?)<\/b>")[1];
            return selectedChannel ? `<textarea>${channelName}</textarea>` : '';
        }

在模板中：

<div class="channels" v-html="channel">
</div>

Answer 2

我认为你正在寻找＆＃39; v-html＆＃39;指令

Answer 3

您需要使用v-html指令：

<div class="channels" v-html="channel">
</div>

示例小提琴here

如何在Vue中传递一个字符串并将其视为html

3 个答案: