应统一用 data-* 属性（如 data-category）替代 class 实现筛选绑定，避免样式干扰；多选用 Set 管理状态防重复；筛选逻辑通过标准化 query 参数（如 brand=apple&brand=huawei&rating_gte=4）表达，URL 解析须用 getAll() 处理重复参数。
怎么用 data-* 属性替代 class 做筛选绑定
用 class 模拟筛选状态是常见但危险的做法——比如写 class="tag-js active"，一旦 CSS 重命名、或多人协作时加了 class="tag-js featured"，JS 就会漏匹配或误匹配。真正安全的绑定方式是统一用 data-category（或你自定义的 data- 名）。
所有可筛选项和触发按钮都必须带这个属性，值保持小写、无空格、无符号：
<button data-category="javascript">JavaScript</button> <article data-category="javascript" data-status="published">…</article>
这样既能组合筛选（比如再加 data-status），又不会和样式类冲突。注意：id 不行——它要求唯一；name 也不行——它是表单专用语义。
多选标签怎么动态管理而不重复添加
用户连续点同一个标签两次，不能生成两个“JavaScript”标签。核心是用 Set 存已激活值，而不是数组：
-
const selected = new Set()初始化状态容器 - 点击时：若已存在则
selected.delete(value)，否则selected.add(value) - 生成 UI 标签前用
Array.from(selected)转回数组，天然去重
别在 DOM 上存状态（比如给按钮加 data-selected="true"），容易和 JS 状态不同步。状态源头必须唯一，且只在 JS 里维护。
怎么让筛选条件支持“且”“或”逻辑切换
纯前端实现“或”逻辑不难，但“且”需要更严谨的数据结构。关键不是改 JS 逻辑，而是提前约定好后端能理解的参数格式：
- “或”场景（如多品牌）：多个同名
checkbox，name="brand"，靠FormData自动收集为数组 - “且”场景（如价格区间）：用独立字段
name="price_min"和name="price_max"，后端解析时做范围判断 - 混合逻辑（如“品牌是苹果或华为”且“评分≥4”）：前端拼成
brand=apple&brand=huawei&rating_gte=4，后端按_gte后缀识别操作符
不要在 JS 里硬编码 && 或 || 判断——那是后端职责。前端只负责把用户意图转成明确、可扩展的 query 参数。
为什么 URL 同步必须手动解析重复参数
浏览器原生 URLSearchParams 的 get() 方法只返回第一个值，对 brand=apple&brand=huawei 这种会丢数据。必须用 getAll()：
const params = new URLSearchParams(location.search);
const brands = params.getAll('brand'); // ['apple', 'huawei']
同样，提交时也别用 Object.fromEntries(params)——它会把重复 key 覆盖掉。要保留多值，得用 Array.from(params.entries()) 手动遍历构造对象或 FormData。
这一步最容易被跳过，结果就是：用户分享链接后，对方只看到一个品牌被筛选中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
