HTML多条件筛选需用JavaScript实现，优先使用dataset读取data属性，多值用空格分隔，AND逻辑单次遍历聚合判断，输入需防抖并同步URL状态。
HTML 本身不支持多条件筛选，data 属性只是标记数据的容器，真正起作用的是 JavaScript 如何读取、解析和比对这些值。
为什么必须用 dataset 而不是 getAttribute
用 element.dataset.category 能自动处理属性名转换（如 data-user-id → userId），且返回字符串类型更安全；而 getAttribute('data-user-id') 返回原始字符串，需手动处理连字符、大小写，容易在多单词属性上出错。更重要的是：dataset 是只读映射，不会因 DOM 变更意外失效，适合做条件判断的稳定入口。
data-* 值怎么存才方便多条件 AND 匹配
多个值必须用空格分隔（不是逗号或 JSON），例如 data-tags="react vue typescript"，这样后续可用 split(' ') 得到数组，再配合 Set 或 includes() 判断交集。避免以下写法：
-
data-tags='["react","vue"]'—— JSON 字符串需JSON.parse()，失败风险高 -
data-tags="react,vue"—— 英文逗号可能出现在真实标签中（如 "C++, Rust"），split(',')会误切 -
class="tag-react tag-vue"—— class 语义污染，且无法精准匹配tag-react（会命中tag-reactive）
多条件 AND 逻辑怎么写才不出空结果
常见错误是把每个条件当独立过滤器链式调用，导致最终只剩同时满足全部条件的项——但用户没意识到“金毛”和“成年”在数据里可能无交集。正确做法是单次遍历 + 全条件聚合判断：
- 收集所有已激活条件，例如：
const filters = { breed: 'golden', age: 'adult', health: 'vaccinated' } - 对每个元素执行一次
filter()，内部用&&连接各维度检查：filters.breed ? el.dataset.breed === filters.breed : true - 空值一律视为
true（不限制），避免某个字段未填就整行被剔除 - 字符串比较前统一
trim().toLowerCase()，防止前后空格或大小写导致失配
防抖和状态同步容易被忽略的点
多个 input 或 select 共享同一套筛选逻辑时，直接绑 input 事件会引发竞态：用户快速改两个框，后触发的回调会覆盖前一个的状态。必须做到：
- 所有输入控件共用一个防抖后的回调函数，比如
debounce(onFilterChange, 300) - 回调内一次性读取全部值：
const breed = breedInput.value; const age = ageSelect.value; - 显隐控制用
el.classList.toggle('hidden', !matches)，而不是style.display—— 否则原始 display 值（如inline-flex）会被覆盖丢失 - URL 同步不能只靠
history.pushState()，还要监听popstate并还原表单值和元素显隐状态，否则前进/后退会断层
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
