如何在VueJS中突出显示语法

<span class="highlight">{{ message }}</span>

<span :class="{ 'highlight': isHighlighted }">{{ message }}</span>

computed: {
  isHighlighted() {
    // 根据条件判断是否需要突出显示
    return this.message.includes('VueJS');
  }
}

<span v-bind:class="{ 'highlight': isHighlighted }">{{ message }}</span>

data() {
  return {
    isHighlighted: false
  };
},
mounted() {
  // 根据条件判断是否需要突出显示，并更新isHighlighted的值
  if (this.message.includes('VueJS')) {
    this.isHighlighted = true;
  }
}

<span>{{ message | highlight }}</span>

filters: {
  highlight(value) {
    // 根据条件判断是否需要突出显示，并添加样式类
    if (value.includes('VueJS')) {
      return `<span class="highlight">${value}</span>`;
    }
    return value;
  }
}