output标签本身不自动绑定计算结果，必须通过JavaScript监听事件并手动设置value或textContent才能实现实时更新。
output 标签不是“自动绑定计算结果”的魔法容器，它本身不监听输入、不执行逻辑、不触发更新——必须配合 JavaScript 手动设置 value 或 textContent 才能显示实时结果。
为什么直接写 <output>{{result}}</output> 不生效
HTML 没有模板语法，output 不支持插值。它的内容只能由 JS 控制，且默认是空的。常见错误是只放标签却不写事件监听：
- 用户修改
<input type="number">，但没绑定input或change事件 - 写了 JS，但读取的是
input.value字符串却没转数字，导致拼接出"2" + "3" = "23" - 用
innerHTML写入内容，但output是替换型元素，应优先用value（表单关联时）或textContent（纯展示）
如何正确绑定 input → output 的实时更新
核心是监听输入变化并同步计算。推荐用 input 事件（比 change 更及时）：
<form oninput="result.value = Number(a.value) + Number(b.value)"> <input name="a" type="number" value="0"> + <input name="b" type="number" value="0"> = <output name="result">0</output> </form>
说明：
立即学习“前端免费学习笔记（深入）”；
-
oninput直接写在form上，可捕获内部所有可交互子元素的变化 -
output必须有name属性，才能被form[name]引用（否则 JS 中拿不到） -
Number()强制转换避免字符串拼接；若输入为空，Number("")返回0，符合多数计算预期
output 的 for 属性到底有什么用
for 不是必需的，但它让语义更清晰，并支持屏幕阅读器关联：
- 当
output的for值等于某个input的id，辅助技术会把两者建立关系 - 它**不触发任何自动行为**：改
input#price的值，不会因为output for="price"就自动更新内容 - 实际中，
for更适合标注“这个输出是由哪个输入驱动的”，比如：<output for="discount price">表示它依赖多个输入
遇到小数精度问题怎么办（比如 0.1 + 0.2 = 0.30000000000000004）
output 显示的是原始 JS 计算结果，浮点误差照常出现。修复方式取决于场景：
- 货币类：用
toFixed(2)后再赋值，如result.value = (a + b).toFixed(2) - 科学计算类：用
Math.round((a + b) * 100) / 100避免toFixed返回字符串 - 注意：
toFixed返回字符串，若后续还要参与计算，得再parseFloat()—— 这恰恰说明：不要把格式化逻辑和计算逻辑混在一处
真正容易被忽略的点是：很多人以为 output 是个“响应式组件”，其实它只是个带语义的容器。所有实时性都来自你写的事件监听和更新逻辑——漏掉一个 input 事件，或者忘了处理空值，结果就停在旧值上不动了。
