纯html无法实现条件渲染，因其无执行环境，不能解析js表达式；需js动态控制hidden、class等属性，并同步更新required等状态以确保表单校验、无障碍访问一致。
纯 HTML 无法实现条件渲染——class、hidden、disabled 这些属性本身不带逻辑判断能力，它们只是静态状态标记。所谓“用属性实现条件渲染”，实际是指：在 JavaScript 控制下，根据数据动态设置或移除这些属性，从而间接控制元素显隐、启用/禁用等行为。
为什么不能靠 HTML 属性自己“判断”
HTML 是声明式标记语言，没有执行环境。像 hidden="{{data.show}}" 或 class="item {{data.type === 'error' ? 'error' : ''}}" 这类写法在原生 HTML 中完全无效——浏览器会原样输出字符串，不会解析 JS 表达式。这类语法只存在于模板引擎（如 EJS、Vue、HML）或框架（React、Angular）的编译阶段，不是浏览器原生支持的。
hidden 和 style="display: none" 的区别与选择
两者都能隐藏元素，但语义和行为不同：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
hidden是布尔属性，存在即生效；移除该属性即恢复显示。它不影响 CSS 优先级，且对辅助技术（如读屏器）有明确语义含义（内容被主动隐藏） -
style="display: none"是内联样式，优先级高，容易被其他 CSS 覆盖；且不具备语义，屏幕阅读器可能仍会读取（取决于具体实现） - 若需响应式切换，推荐用
classList.toggle("hidden", condition)配合 CSS 规则.hidden { display: none; }，比反复操作style.display更可控、更易维护
表单字段条件显示必须同步更新 required 属性
仅靠 hidden 或 display 隐藏字段，无法阻止表单提交时校验其必填性。浏览器只看 required 属性是否存在，不管元素是否可见。
- 显示字段时，必须设
field.required = true（或field.setAttribute("required", "")） - 隐藏字段时，必须移除
required：field.removeAttribute("required")，否则提交会因校验失败中断 - 别依赖初始 HTML 里的
required硬编码——它不会随 DOM 变化自动失效 - 后端必须重复校验，前端控制只是体验优化，不可替代服务端约束
用 dataset 区分触发源，避免硬编码逻辑分支
多个控件可能影响同一组条件区域（比如多个单选按钮都控制“收货地址”字段显隐）。如果用 id 或 name 做判断，容易耦合过重。
- 给触发控件加
data-trigger="shipping-method"，目标区域加data-target="address-fields" - 事件监听统一捕获
change，再通过event.target.dataset.trigger分发逻辑 - 这样新增一种触发方式只需加新
dataset，不用改核心事件绑定代码 - 比
if (e.target.id === "radio-cash") {...} else if (e.target.id === "radio-card") {...}更易扩展
真正麻烦的从来不是“怎么让元素消失”，而是“消失之后，关联的校验、焦点、提交逻辑、无障碍访问是否还一致”。属性只是开关，背后的状态同步才是关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
