Vue模板中如何写JS表达式？内联逻辑教程

Vue模板中只允许使用JavaScript表达式（如计算、三元运算、方法调用等），严禁嵌入语句（如if、for、let）或副作用操作，掌握这一核心边界是写出清晰、安全、可维护模板的关键；文中通过正误对比、最佳实践（优先使用计算属性和方法封装复杂逻辑）、安全技巧（善用||、&&、?:处理默认值与简单条件）及常见陷阱警示，系统厘清了内联JS的正确用法，帮你避开渲染异常、重复执行和状态污染等高频问题。

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"（重复、难复用、不易测试）

安全使用三元与逻辑运算符

三元运算符 ? : 和逻辑运算符 &&、|| 是模板中最常用、最安全的内联逻辑工具，适合简单条件渲染或默认值处理。

• 显示默认文案：{{ 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 中

以上就是《Vue模板中如何写JS表达式？内联逻辑教程》的详细内容，更多关于的资料请关注golang学习网公众号！