在使用Vue.js时，我如何突出显示一个词？

Question

我试图在Vuetify卡片的文本中突出显示一个特定的单词，但是当我包含这个标签时，它确实包含了它，而没有将它解释为一个HTML标记。

我试过用

str.replace('word', '<mark>word</mark>')

//template
<v-card>
    <v-card-text>{{ markedPassage }}</v-card-text>
</v-card>

// script
data() {
    return {
      markedPassage: "some text <mark>word</mark>"
    }
  }

https://codepen.io/edlgg/pen/KKPmojm

我希望选中的单词被突出显示。我也希望能够改变颜色，但这应该是容易做到的。

Answer 1

您应该按照以下方式使用v-html指令：

  <v-card-text v-html="markedPassage"></v-card-text>

检查这个codepen