插值表达式

插值表达式使用双大括号 {{ }} 将数据绑定到文本内容。

基本用法

HTML

<span>{{ message }}</span>

当组件的 message 属性变化时，span 的内容会自动更新。

支持 JavaScript 表达式

HTML

<!-- 数学运算 -->
<span>{{ count + 1 }}</span>

<!-- 三元表达式 -->
<span>{{ isActive ? '激活' : '未激活' }}</span>

<!-- 字符串方法 -->
<span>{{ text.toUpperCase() }}</span>

<!-- 数组方法 -->
<span>{{ items.join(', ') }}</span>

仅支持表达式，不支持语句（如 if、for）或声明（如 var、let）。

不支持的用法

HTML

<!-- 错误：这是语句，不是表达式 -->
<span>{{ var a = 1 }}</span>

<!-- 错误：流程控制 -->
<span>{{ if (ok) { return 'yes' } }}</span>

原始 HTML

插值表达式会将数据解释为纯文本，而非 HTML。如需输出 HTML，使用 v-html 指令：

HTML

<div v-html="rawHtml"></div>

v-html 内容直接插入，不进行编译，需注意 XSS 风险。

要点总结

插值表达式 {{ }} 用于文本数据绑定
支持单行 JavaScript 表达式，不支持语句和控制流
输出 HTML 需使用 v-html 指令
表达式在组件实例作用域内求值