在 vue 模板中标注重点最简单有效的方式是直接写 等原生 html 标签，配合 {{ }} 插值或 v-html（需确保内容可信），语义化推荐使用 标签。
Vue 模板里怎么标重点？用 v-html 或 v-text 都不行
直接在 Vue 模板中写 <strong>重点</strong> 是最简单有效的标注方式，但很多人误以为必须用指令处理。实际上，Vue 的响应式模板天然支持 HTML 标签渲染——只要不是用 v-text（它会转义所有标签），而是用插值语法 {{ }} 或 v-html（需谨慎）即可保留标签语义。
常见错误是把带格式的文本塞进 v-text，结果 <em>加粗</em> 被原样显示成字符串。正确做法是：
- 纯文本强调：直接写
<span class="highlight">{{ item.label }}</span>，样式由 CSS 控制 - 服务端返回含 HTML 的内容（如富文本摘要）：用
v-html="item.summary"，但必须确保内容可信，否则有 XSS 风险 - 动态控制强调逻辑：用
<strong v-if="isImportant">{{ text }}</strong>，比拼接字符串更 Vue 化
HTML5 语义化标注重点该用什么标签？mark 不是装饰品
<mark></mark> 是 HTML5 原生语义标签，专用于“高亮文档中与当前上下文相关的部分”，比如搜索结果中的关键词、代码片段中的匹配行。它不是 <span style="background: yellow"></span> 的快捷写法，而是一种可被浏览器、读屏软件和搜索引擎识别的语义信号。
在 Vue 中使用它毫无门槛：
立即学习“前端免费学习笔记（深入）”；
<template>
<p>搜索结果：<mark>{{ keyword }}</mark> 出现在第 {{ pos }} 行</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2473" title="PpcyAI"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/176741038734713.png" alt="PpcyAI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2473" title="PpcyAI">PpcyAI</a>
<p>泡泡次元AI-游戏美术AI创作平台，低门槛上手，高度可控，让你的创意秒速落地</p>
</div>
<a href="/ai/2473" title="PpcyAI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</template>
注意两点：
-
<mark></mark>默认背景色可能被全局 CSS 覆盖，建议用mark { background-color: #ff0; }显式重置 - 不要用
<mark></mark>替代<strong></strong>或<em></em>：前者表“相关性高亮”，后者表“语气强调”或“语义强调”
Vue 环境配置真麻烦？CLI 创建项目后根本不用配重点标注功能
标注重点不涉及任何 Vue 环境配置。Vue CLI、Vite 或手动引入 CDN 的项目，都默认支持原生 HTML 标签和响应式插值。所谓“配置麻烦”，往往源于混淆了三类问题：
- 想让 Markdown 内容里的
**重点**自动转成<strong></strong>→ 需要集成marked或markdown-it，和 Vue 本身无关 - 需要国际化文案中动态插入强调标签 → 用
$t('msg', { emphasis: '<em>' + word + '</em>' })并配合v-html，但要注意 i18n 插件是否允许 HTML - 团队规范要求所有重点必须走统一组件（如
<highlight>文本</highlight>）→ 这属于业务封装，不是环境配置
真正要检查的只有两处：vue.config.js 是否禁用了 HTML 解析（极罕见），以及 ESLint 规则是否误报 v-html 为危险用法（可针对具体位置加 // eslint-disable-next-line vue/no-v-html）。
为什么 v-html 在 Vue 3 组合式 API 里更难搞定了？
Vue 3 的 setup() 函数中，ref 和 reactive 的值默认是响应式的，但如果你把含 HTML 的字符串赋给 ref，再在模板中用 v-html 绑定，它确实能工作。问题出在「动态生成 HTML 字符串」这个动作本身容易出错：
- 手拼
`<strong>${text}</strong>`：若text含或 <code>"，会导致 DOM 结构破坏 - 用
DOMPurify.sanitize()清洗后再绑定：增加包体积，且 Purify 默认不放行<mark></mark>，需手动配置白名单 - 更稳妥的做法是放弃字符串拼接，改用计算属性拆解结构：
computed(() => ({ tag: 'mark', content: keyword }))，模板中用<component :is="highlight.tag">{{ highlight.content }}</component>
说到底，标注重点这件事本身很简单；复杂的是你试图用它解决本不属于它的任务——比如做富文本编辑、做安全沙箱、或者替代 CSS 类名系统。
