使用 Vue.js 时如何突出显示 Vuetify 卡片中的单词？答案

【问题标题】：How can I highlight a word in a Vuetify card when using Vue.js?使用 Vue.js 时如何突出显示 Vuetify 卡片中的单词？
【发布时间】：2020-01-01 02:30:00
【问题描述】：

我试图在 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

我希望突出显示选定的单词。我也希望能够更改颜色，但这应该很容易做到。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

你应该使用v-html指令如下：

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

检查这个codepen

【讨论】：