原生 无法实现点击标签筛选的标签云交互，需用语义化 html + dataset + javascript 实现：标签用 data-category 存小写标识，内容项同字段多值空格分隔；点击通过 data-category~="xxx" 精准匹配、documentfragment 批量渲染、set 管理多选、事件委托确保准确捕获。
原生 `
用 dataset 绑定分类关键词，不用 class 或 id
每个标签用 `data-category` 存唯一标识，小写、无空格、无符号：
<button data-category="frontend">前端</button><button data-category="vue">Vue</button>- 对应内容项也加相同字段：
<div data-category="frontend vue">…</div>（支持多值，用空格分隔）
点击标签时动态匹配并显示内容
不靠 class 切换模拟显隐，而是真实控制 display：
- 默认所有内容设
style.display = "none"，避免首屏闪动 - 点击标签后，用
document.querySelectorAll('[data-category~="vue"]')精准匹配含该词的内容（~="xxx"匹配空格分隔的单词） - 用
DocumentFragment批量收集匹配节点，最后一次性插入，减少重排
支持多选叠加，用 Set 管理已选关键词
用户可连续点多个标签，实现“前端 + Vue + 工具”联合筛选：
- 用
const selected = new Set()记录当前激活的 category - 每次点击切换：存在则 delete，不存在则 add
- 筛选时遍历所有内容项，检查其
dataset.category.split(' ')是否与 selected 有交集
事件委托防 target 错位
标签里可能嵌套图标或 span，直接读 event.target.dataset.category 常为 undefined：
- 统一用
event.target.closest('[data-category]')向上找最近带该属性的元素 - 这样无论点文字、图标还是 padding 区域，都能正确拿到 category 值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
