如何在vuejs中呈现带有classname的加载HTML文本

Question

我尝试渲染一些加载在json文件中的html文本。

textstring包含class="css样式

"example": word 1<br><span class="main-color">word 2</span> word 3"

vuejs部分如下所示:

<p v-html="example">  </p>

css:

.main-color  {
color: #ff00ff;
}

HTML代码在调试器中看起来与预期的一样，但是文本没有呈现!为什么?

Answer 1

您在变量

的开头缺少一个"

这是

<script setup>
import { ref } from 'vue'
const example = ref("word 1<br><span class="main-color">word 2</span> word 3")
</script>
<template>
<p v-html="example">  </p>
</template>
<style>
.main-color  {
color: #ff00ff;
}
</style>