Vue模板中只支持JavaScript表达式，不支持语句和流控制；正确示例为{{ count + 1 }}、{{ isActive ? 'active' : 'inactive' }}，错误示例为{{ if (count > 0) { return 'yes' } }}、{{ let x = 1 }}。
Vue 模板中的 JavaScript 表达式写在双大括号 {{ }} 或指令（如 v-if、v-bind）的值里，但不是任意 JS 代码都能写，它只支持表达式（expression），不支持语句（statement）和流控制（如 if、for）。掌握这个边界，是写出可维护模板的关键。
只允许表达式，禁止语句和声明
表达式会返回一个值，比如 a + b、items.filter(x => x.active)、message.toUpperCase()；而语句（如 if (a) { ... }、let x = 1、function foo() {}）在模板中直接写会报错。
- ✅ 正确：
{{ count + 1 }}、{{ isActive ? 'active' : 'inactive' }}、{{ users.map(u => u.name).join(', ') }} - ❌ 错误：
{{ if (count > 0) { return 'yes' } }}、{{ let x = 1 }}、{{ for (let i = 0; i
方法调用和计算属性优先于内联逻辑
复杂逻辑别堆在模板里。比如格式化日期、拼接用户名、权限判断等，应封装为方法或计算属性，保持模板简洁可读。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 推荐写法：在
methods中定义formatTime(timestamp)，模板中写{{ formatTime(post.time) }} - 推荐写法：用计算属性
computed: { canEdit() { return this.user.role === 'admin' || this.post.authorId === this.user.id } }}，模板中写v-if="canEdit" - 避免写法：
v-if="user.role === 'admin' || post.authorId === user.id"（重复、难复用、不易测试）
安全使用三元与逻辑运算符
三元运算符 ? : 和逻辑运算符 &&、|| 是模板中最常用、最安全的内联逻辑工具，适合简单条件渲染或默认值处理。
- 显示默认文案：
{{ user.name || '匿名用户' }} - 条件类名：
:class="[isActive ? 'active' : '', hasError ? 'error' : '']" - 条件渲染内容：
{{ isLoading ? '加载中...' : `共 ${list.length} 条` }} - 注意：
foo && bar()中，若foo为假值，bar()不会执行——这是短路特性，合理利用可避免报错
避免在模板中访问副作用或修改响应式数据
模板表达式应是“纯”的：只读取数据、不修改状态、不发起请求、不触发 alert/console 等副作用。
- ❌ 危险：
{{ updateUserStatus() }}（每次重渲染都调用，可能重复提交） - ❌ 危险：
{{ items.push(newItem) }}（改变原数组，且返回 length 值，语义混乱） - ✅ 正确：把修改逻辑放在事件处理器（如
@click="addUser"）或 watch/computed 中
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
