Vue中双大括号{{ }}是最基础的文本插值语法，用于在模板内容区动态渲染响应式变量或JavaScript表达式，支持变量、运算、三元判断、方法调用等，但不可用于属性值或书写语句；需配合ref/reactive声明响应式数据，且默认转义HTML以防XSS。

Vue 中用双大括号 {{ }} 渲染文本变量是最基础、最直接的方式，它会把 data 或 script setup 中定义的响应式值实时插入到 HTML 文本中，且自动响应数据变化。

怎么写：基本格式和位置

双大括号只能写在模板的标签**内容区域**（即开始与结束标签之间），不能用于属性值里。比如：

• ✅ 正确：<p>欢迎，{{ username }}</p>
• ❌ 错误：<div id="{{ id }}"></div> —— 属性要用 v-bind（简写 :）

能放什么：支持的内容类型

{{ }} 内部不是任意 JS 代码，而是**单个 JavaScript 表达式**，必须有明确返回值：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 响应式变量：如 {{ count }}、{{ user.name }}
• 简单运算：如 {{ price * quantity }}、{{ age >= 18 ? '成年' : '未成年' }}
• 方法调用：如 {{ formatDate(createTime) }}（前提是该函数在组件作用域内可访问且有返回值）
• 字符串操作：如 {{ message.toUpperCase().split(' ').join('-') }}

⚠️ 注意：不能写语句（如 if、for）、赋值（{{ a = 1 }}）、或带分号的多表达式。

常见问题与应对

实际开发中容易遇到两个典型现象：

• 页面闪现 {{ }}：首次加载时可能短暂看到未编译的花括号。可用 v-cloak 配合 CSS 隐藏，或改用 v-text 指令避免闪烁
• 想渲染 HTML 标签却只显示源码：双大括号默认做 HTML 转义（防 XSS），若需真实渲染 HTML，应使用 v-html="rawHtml"，但务必确保内容可信

配合响应式声明的写法（Vue 3 setup）

在 <script setup></script> 中，变量需通过 ref 或 reactive 创建才具备响应性，然后直接在 {{ }} 中引用：

<script setup><br> import { ref } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br> const name = ref('小李')<br> const price = ref(59.9)<br> const num = ref(2)<br></script>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！