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 方法调用和计算属性优先于内联逻辑复杂逻辑别堆在模板里。比如格式化日期、拼接用户名、权限判断等，应封装为方法或计算属性，保持模板简洁可读。推荐写法：在 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"（重复、难复用、不易测试）安全使用三元与逻辑运算符三元运算符 ? : 和逻辑运算符 &&、|| 是模板中最常用、最安全的内联逻辑工具，适合简单条件渲染或默认值处理。立即学习“Java免费学习笔记（深入）”；显示默认文案：{{ 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 中