key必须唯一稳定，v-for不加或重复key会导致dom错乱；数组索引仅适用于静态列表，对象数组须用id等唯一字段；label for与input id需严格一一对应；模板中禁用复杂表达式，应抽离至计算属性或对象语法；v-for非html原生，依赖vue加载。
循环渲染时 key 必须唯一且稳定
Vue 中 v-for 不加 :key 或 key 重复，会导致 DOM 更新错乱、状态丢失、动画异常——这不是警告，是实际行为偏差。浏览器不会报错，但用户会看到“点了 A 项却高亮了 C 项”这类问题。
- 数组索引
:key="index"仅适用于静态列表；一旦涉及增删、排序，index 会漂移，key 就失效 - 对象数组必须用唯一字段（如
id）：:key="item.id"；若后端没返回 id，需在请求后手动补全（例如data.map((it, i) => ({ ...it, __key: i }))） - 避免用随机数或
Date.now()生成 key，它会让 Vue 认为每次都是新节点，丢弃所有已有状态（输入框内容、展开收起状态等）
label for 和 input id 必须严格配对，且不能复用
循环中每个表单项都得有独立的 id 和对应 for，否则点击文字无法聚焦、键盘导航中断、读屏器读错。这不是“看起来能跑”，而是可访问性硬性失败。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 错误写法：
<label for="email"><input name="email"></label>→ 缺失id，点击无效 - 错误写法：
id="email"写死在循环里 → 所有input共享同一 id，for="email"只绑定到第一个 - 正确写法：
<input :id="'user-email-' + user.id" name="email"><label :for="'user-email-' + user.id">邮箱</label>
模板中禁止直接拼接复杂表达式或内联逻辑
像 <div class="status {{ user.status === 'active' ? 'online' : 'offline' }}"> 这类写法，在 Vue 模板里虽能运行，但破坏可维护性：无法单元测试、IDE 难以跳转、多人协作时容易误改语义。
<ul>
<li>应抽离为计算属性：<code>computed: { statusClass() { return this.user.status === 'active' ? 'online' : 'offline' } }，再用 :class="statusClass"
:class="{ online: user.status === 'active', offline: user.status !== 'active' }"
HTML 本身不支持循环，v-for 是 Vue 的编译时指令
把 v-for 当成 HTML 原生语法，是常见误解。未引入 Vue 的页面里写 <li v-for="...">，浏览器完全忽略该属性，也不会报错——你看到的是空列表，不是“没生效”，而是根本没被处理。
- 确认
vue.runtime.esm-bundler.js或完整版已加载，且组件已正确注册 - SSR 场景下，服务端渲染和客户端 hydrate 时 key 不一致，会导致 “Hydration failed” 错误，必须保证两端数据结构与 key 生成逻辑完全一致
- 纯静态 HTML 或邮件模板中，别幻想靠
v-for渲染——得用构建时模板引擎（如 EJS、Handlebars）或后端语言生成
