Vue模板中JavaScript表达式怎么写？教你规范编写内联逻辑教程-Vue.js-PHP中文网

vue模板中只允许写javascript表达式，不能写语句或声明；合法写法包括基础运算、三元判断、逻辑短路、方法调用、数组/字符串处理及全局白名单对象调用；禁止使用语句、多行代码、修改响应式数据、副作用操作及未授权全局变量。

vue模板中javascript表达式怎么写？教你规范编写内联逻辑教程

Vue模板中只允许写 JavaScript 表达式，不能写语句或声明，这是最核心的边界。表达式必须能返回一个值，比如 count + 1、user.name、items.filter(x => x.active)；而 if、for、let、function 这类语句会直接报错。

哪些写法是合法的

所有能求出明确结果的单个表达式都可用：

基础运算：{{ number * 2 }}、{{ 'Hello ' + name }}
三元判断：{{ isActive ? '在线' : '离线' }}
逻辑短路：{{ user && user.avatar }}（user为假时不会访问avatar）
方法调用：{{ formatDate(post.time) }}（前提是formatDate已在methods中定义）
数组/字符串处理：{{ list.map(i => i.title).join(' | ') }}、{{ message.toUpperCase() }}
全局白名单对象：{{ Math.round(price) }}、{{ new Date().getFullYear() }}、{{ JSON.stringify(data) }}

哪些写法会报错

以下常见写法在 Vue 模板中一律禁止：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

使用语句：{{ let x = 1 }}、{{ if (ok) { return 'yes' } }}
多行或分号分隔：{{ const a = 1; a + 2 }}
修改响应式数据：{{ items.push(item) }}、{{ count++ }}
调用有副作用的方法：{{ api.submit() }}、{{ alert('hi') }}
访问未授权全局变量：{{ window.location.href }}、{{ localStorage.getItem('token') }}

复杂逻辑该放哪儿

模板不是写业务逻辑的地方。一旦表达式变长或复用多次，就该移出模板：

用计算属性处理派生状态：比如 computed: { fullName() { return this.firstName + ' ' + this.lastName } }，模板中只写 {{ fullName }}
用 methods 封装可复用操作：比如日期格式化、权限校验，再在模板中调用 {{ formatTime(time) }}
用 v-if/v-show 配合布尔计算属性：比如 v-if="canDelete"，而不是把整段判断条件堆在指令里