在 Vue 中直接拼接含 HTML 标签的模板字符串（如 ...）无法被自动解析为 DOM 元素，需借助 v-html 指令安全渲染，并配合结构化处理实现局部样式控制。
在 vue 中直接拼接含 html 标签的模板字符串（如 `...`）无法被自动解析为 dom 元素，需借助 `v-html` 指令安全渲染，并配合结构化处理实现局部样式控制。
当你在 methodNameDisplay(m) 方法中返回一个包含 HTML 标签的字符串（例如 <span class="method-name">${m.methodName}</span>），Vue 的默认插值 {{ }} 会将其作为纯文本转义输出，导致标签原样显示。要让浏览器真正解析并渲染这些标签，必须使用 v-html 指令——但关键前提是：该内容必须由可信源生成，且不含用户输入，否则存在 XSS 风险。
✅ 正确做法（推荐）：结构化数据 + v-html 安全渲染
首先改造你的方法，返回带语义标记的 HTML 字符串：
methodNameDisplay(m) {
if (m.friendlyName === m.methodName) {
return m.friendlyName;
} else {
// ✅ 使用可预测、无用户输入的 HTML 片段
return `${m.friendlyName} - <span class="method-name secondary">${m.methodName}</span>`;
}
}然后在子组件 MethodRepeaterTitle 内部（或调用处）使用 v-html 渲染：
<template>
<div class="title-wrapper">
<div v-html="title" />
</div>
</template>
<style scoped>
.title-wrapper .secondary {
color: #64748b;
font-size: 0.9em;
font-weight: 500;
opacity: 0.85;
}
</style>⚠️ 重要注意事项：
-
绝不将用户输入、API 响应内容直接插入
v-html—— 即使经过.replace()或正则处理，仍可能残留恶意脚本； - 若需支持不可信内容，请集成 DOMPurify（Vue 3 推荐搭配
vue-dompurify-html）进行白名单过滤； - 更健壮的替代方案（适用于复杂交互）：使用
<component :is></component>+ 解析逻辑将字符串拆分为 VNode 数组（如将"A - B"拆为[{ type: 'text', content: 'A - ' }, { type: 'component', name: 'RouterLink', props: { to: '/m/B' } }]），但这需额外封装解析器，适合高级场景； - 简单样式隔离也可考虑 CSS-in-JS 方案（如
:style动态绑定），但不适用于 HTML 结构嵌套需求。
? 小结：模板字符串本身不具备渲染能力；Vue 的响应式系统只作用于数据与指令，而非字符串内的 HTML。因此，“让某一部分变色”的本质不是“修改字符串”，而是“生成可被 Vue 安全挂载的富文本结构”。v-html 是最轻量、最直接的解法——只要守住「内容可信」这一条安全红线。
立即学习“前端免费学习笔记（深入）”；
