Vue模板高可读性核心是结构清晰、意图明确、约束可见：语义化分层隔离关注点，v-if与v-for不共存，双括号内仅放简单表达式，动态内容显式绑定并严控安全风险。
写 Vue 模板，核心不是“能渲染出来”，而是“别人一眼看懂逻辑、改起来不踩坑、加功能不撕代码”。高可读性模板的本质是：结构清晰、意图明确、约束可见。
结构分层：用语义化容器隔离关注点
避免把所有内容堆在根 <template></template> 下。按业务区块划分层级，每个区块有明确职责和命名类名：
- 用带语义的 class 包裹整块区域，如
<section class="user-list-page"></section>、<header class="page-header"></header> - 操作区、列表区、分页区等物理分离，不混在一起；例如查询表单和表格不在同一级 div 内硬塞
- 组件内避免无意义的嵌套 div（如纯为了加 class 而套一层），优先用语义化标签或合理使用 class 控制样式
指令使用：严格遵守优先级与职责边界
v-if 和 v-for 绝不共存于同一元素——这是规范红线，不是建议：
- 若需筛选后遍历，先用计算属性过滤：
const activeItems = computed(() => list.filter(i => i.isActive))，再v-for="item in activeItems" - 若需条件控制整个列表是否显示，把 v-if 移到父容器上，如
<ul v-if="list.length">...</ul> - v-show 仅用于高频切换（如 Tab 面板），v-if 用于真正销毁/重建（如权限控制的模块）
表达式精简：模板里只放“可读即懂”的逻辑
双大括号 {{ }} 中禁止出现复杂判断、函数调用、多层嵌套访问：
立即学习“前端免费学习笔记（深入）”；
- 允许：
{{ user.name }}、{{ count + 1 }}、{{ status === 'active' ? '启用' : '停用' }} - 禁止：
{{ formatTime(item.createdAt, 'YYYY-MM-DD') }}、{{ items.filter(...).map(...).join(', ') }} - 复杂逻辑一律抽到计算属性或方法中，模板只负责“展示结果”，不负责“怎么算”
绑定与安全：显式、可控、有意识
所有动态内容都应有明确归属和风险意识：
- HTML 渲染必须用
v-html，且仅用于可信富文本（如 CMS 后台配置的说明文案），绝不用在用户输入或接口返回的任意字段上 - 属性绑定统一用
:缩写，布尔属性（如:disabled）确保值为 true/false/null/undefined，避免传字符串 'false' 导致误启用 - 图片、链接等资源地址必须来自 data 或 ref，不拼接字符串路径，防止 XSS 或 404
