多条件筛选数据为空是因未实现交集逻辑，应让每只宠物满足所有已激活条件；flex卡片错位需设flex-wrap和min-width；原生表单元素更轻量；图片错误应避免onerror内联写法。
用 filter() 实现前端宠物筛选时，为什么选中多个条件后数据全没了
常见现象是：勾选“金毛”+“成年”后，列表变空，但单独选任一条件都有结果。根本原因是没做「多条件交集」逻辑，而是把每个条件当成了独立过滤器，最后只保留了同时满足所有条件的项——但用户往往没意识到“成年”和“金毛”在数据里可能压根没交集（比如后台录入的金毛全是幼犬）。
实操建议：
• 用 Array.prototype.filter() 做主循环，对每只宠物检查是否满足「当前已激活的所有条件」
• 每个筛选项（如品种、年龄、健康状态）对应一个布尔标记，例如 filters.breed === '' || pet.breed === filters.breed
• 特别注意空值处理：未选中的下拉框或复选框应视为“不限”，不能参与过滤判断
• 示例片段：
const visiblePets = pets.filter(pet => {
return (filters.breed === '' || pet.breed === filters.breed) &&
(filters.age === '' || pet.ageGroup === filters.age) &&
(filters.health === '' || pet.healthStatus === filters.health);
});
宠物卡片用 flex 布局错位？检查 min-width 和 flex-wrap
很多人用 display: flex 做响应式卡片流，结果在小屏上卡片被强行压缩、图片变形，或整行换行不自然。这不是 flex 不行，而是漏掉了两个关键控制点。
实操建议：
• 给卡片容器加 flex-wrap: wrap，否则子项超出宽度会溢出或缩小
• 给单张卡片设 flex: 0 0 calc(33.333% - 1rem)（三列）+ min-width: 280px，防止在窄屏下缩太小
• 图片统一用 object-fit: cover + 固定宽高比容器（如 aspect-ratio: 4/3），避免拉伸失真
• 避免对卡片直接设 width: 33%，它不响应内容变化，且 IE 不支持
筛选控件用原生 select 和 checkbox 就够用，别急着上框架组件
很多教程一上来就推荐用 Vue 的 v-model 或 React 的受控组件做筛选，但纯 HTML 页面完全不需要。原生表单元素更轻、兼容性好、SEO 友好，还能用 :checked 伪类做样式联动。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
• 多选场景用 <input type="checkbox" name="species" value="cat">，通过 document.querySelectorAll('input[name="species"]:checked') 获取选中值
• 下拉筛选用 <select multiple></select> 或多个单选 <input type="radio">，取决于业务是否允许多选
• 所有控件必须带 name 属性，方便后续扩展表单提交或 localStorage 缓存
• 注意 Safari 对 <select multiple></select> 的点击体验较差，移动端建议改用 checkbox 列表
图片加载失败时显示占位文字，但别用 onerror 内联事件
给每张宠物图写 <img onerror="this.src='placeholder.jpg'"> 看似简单，实际会污染 HTML、无法批量管理，且在 CSP 严格策略下直接失效。
实操建议：
• 用 CSS 的 ::before 或 background-image fallback 方案（需容器有固定尺寸）
• 更可靠的是 JS 批量监听：遍历所有 img 元素，绑定 onerror 并动态替换 src，同时记录错误上报
• 占位文案建议用 alt 内容增强可访问性，例如 alt="待领养的橘猫，3个月大，已驱虫"
• 如果图片来自外部 API，务必在请求 URL 后加时间戳或版本参数（如 ?v=202405），避免缓存导致旧图长期不更新
真正卡住人的，从来不是怎么写出筛选逻辑，而是默认把“筛选”当成独立功能来实现——而实际需求里，它必须和分页、排序、空状态、加载反馈一起协同工作。哪怕只是静态页面，也建议预留 data-total、data-filtered 这类属性，后面加 JS 时能少踩一半坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
