在 Vue 开发中，"数据驱动视图" 是贯穿始终的核心思想，而模板语法则是实现这一思想的桥梁。本文将聚焦模板语法中最基础也最常用的文本插值与 HTML 渲染能力，从底层逻辑到实战技巧，帮你彻底掌握{``{}}、v-text与v-html的用法与区别，让数据绑定既灵活又安全。
一、文本插值：让数据 "活" 起来的基础
文本插值是 Vue 中最直观的数据绑定方式，它能将组件的数据动态插入到 DOM 中，当数据变化时，视图会自动更新。Vue 提供了两种文本插值方式：{``{}}（Mustache 语法）和v-text指令。
1.1 {``{}}：最常用的 "双大括号" 语法
{``{}}（Mustache 语法）是 Vue 开发者最熟悉的语法，它的本质是 "插值表达式"，作用是将数据以文本形式插入到模板中。
基础用法：直接绑定数据
html
<div id="app">
<p>用户名：{{ username }}</p>
<p>年龄：{{ age }}</p>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
username: '张三',
age: 28
}
}
})
</script>此时页面会渲染为：
bash
用户名：张三
年龄：28当我们通过app.username = '李四'修改数据时，页面会自动更新为 "用户名：李四"------ 这就是 Vue 响应式系统的魔力。
进阶能力：支持简单表达式
{``{}}中不仅能放变量，还能放简单表达式（注意：不能放语句或复杂逻辑）：
html
<!-- 算术运算 -->
<p>年龄+10：{{ age + 10 }}</p>
<!-- 三元表达式 -->
<p>是否成年：{{ age >= 18 ? '是' : '否' }}</p>
<!-- 字符串操作 -->
<p>用户名大写：{{ username.toUpperCase() }}</p>这些表达式会在数据变化时重新计算，确保视图与数据一致。
注意事项：闪烁问题与v-cloak
当页面加载时，若 Vue 实例尚未初始化，{``{}}会短暂显示在页面上（称为 "闪烁"）。解决方法是配合v-cloak指令：
css
/* 隐藏未编译的Mustache语法 */
[v-cloak] {
display: none;
}
html
<p v-cloak>{{ username }}</p>原理：v-cloak在 Vue 编译完成后会被自动移除，在此之前通过 CSS 隐藏元素，避免闪烁。
1.2 v-text：更 "纯粹" 的文本绑定
v-text是 Vue 提供的文本绑定指令，它的作用与{``{}}类似，但用法和特性略有不同。
基础用法：直接替换元素内容
html
<div id="app">
<p v-text="username"></p>
<!-- 等价于 <p>{{ username }}</p> -->
</div>核心区别：内容覆盖特性
v-text会完全覆盖元素内的原有内容 ，而{``{}}可以与其他文本共存：
html
<!-- {{}} 可以混合静态文本 -->
<p>欢迎您，{{ username }}先生</p>
<!-- 渲染为：欢迎您，张三先生 -->
<!-- v-text 会覆盖原有内容 -->
<p v-text="username">欢迎您，先生</p>
<!-- 渲染为：张三（"欢迎您，先生"被覆盖） -->优势：无闪烁问题
v-text是 Vue 指令，在 Vue 初始化时会被优先处理，因此不会出现{``{}}的闪烁问题，无需额外配置v-cloak。
1.3 {``{}}与v-text对比分析
| 特性 | {``{}}语法 |
v-text指令 |
|---|---|---|
| 内容处理 | 插入到现有内容中 | 完全覆盖元素内容 |
| 闪烁问题 | 可能出现，需配合v-cloak |
无闪烁，无需额外配置 |
| 灵活性 | 可混合静态文本，更灵活 | 适合纯数据展示，较固定 |
| 编译时机 | 晚于指令，可能被短暂显示 | 早于插值，优先被处理 |
适用场景：
- 需混合静态文本时用
{``{}}（如 "欢迎您，{{name}}"）；- 纯数据展示且追求性能时用
v-text（避免闪烁处理成本）。
二、原始 HTML 渲染：v-html的能力与风险
{``{}}和v-text都会将数据视为纯文本 （会转义 HTML 标签），但有时我们需要渲染原始 HTML（如富文本内容），这时就需要v-html指令。
2.1 v-html：渲染 HTML 的 "特殊指令"
v-html的作用是将数据解析为 HTML，并插入到元素中（替换元素原有内容）。
基础用法：渲染 HTML 片段
html
<div id="app">
<!-- {{}} 会转义HTML -->
<p>{{ htmlContent }}</p>
<!-- 渲染为：<strong>Hello Vue</strong>（标签被转义） -->
<!-- v-html 会解析HTML -->
<p v-html="htmlContent"></p>
<!-- 渲染为：<strong>Hello Vue</strong>（标签被解析，文字加粗） -->
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
htmlContent: '<strong>Hello Vue</strong>'
}
}
})
</script>原理：直接操作 DOM 的innerHTML
v-html本质上是通过设置元素的innerHTML属性实现的，因此它会：
- 解析数据中的 HTML 标签并渲染；
- 完全替换元素内的原有内容（类似
v-text的覆盖特性）； - 不会触发 Vue 的模板编译（插入的 HTML 中的 Vue 指令不会被解析）。
2.2 安全警告：v-html是把 "双刃剑"
v-html最大的风险是XSS 攻击（跨站脚本攻击）。如果渲染的 HTML 来自用户输入或不可信源，攻击者可能注入恶意脚本：
html
<!-- 危险示例：用户输入恶意内容 -->
<script>
const app = new Vue({
el: '#app',
data() {
return {
// 恶意用户输入的内容（窃取cookie）
userInput: '<script>alert(document.cookie)</script>'
}
}
})
</script>
<!-- 用v-html渲染会执行恶意脚本 -->
<p v-html="userInput"></p>即使现代浏览器会禁止script标签在innerHTML中执行，但攻击者仍可通过其他方式注入风险（如onclick事件）：
html
<!-- 仍有风险的恶意内容 -->
userInput: '<img src=x onerror="alert(\'XSS\')">'2.3 安全使用v-html的原则
-
仅渲染可信内容 ：只能用
v-html渲染后端可控的 HTML（如经过过滤的富文本），绝对不能用于用户输入的内容。 -
后端过滤先行 ：若必须渲染用户相关内容，需在后端通过库（如
DOMPurify）过滤危险标签和属性（如script、onerror）。 -
避免动态生成模板 ：不要用
v-html拼接 Vue 模板（如<div v-html="<div v-for='item in list'>{``{item}}</div>">），Vue 不会解析插入的指令。
三、可视化理解：三种绑定方式的工作流程
为了更直观理解三者的区别，我们用流程图展示它们的工作逻辑：
3.1 {``{}}语法的工作流程
3.2 v-text与{``{}}的核心区别
3.3 v-html的渲染与安全风险
四、实战总结：如何选择合适的绑定方式？
- 日常文本绑定 ：优先用
{``{}}，灵活且易读，配合v-cloak解决闪烁； - 纯数据展示 ：用
v-text，避免闪烁且性能略优； - 渲染可信 HTML ：用
v-html，但必须确保内容安全，后端过滤不可少； - 核心原则：数据绑定的核心是 "数据驱动"，选择方式时需平衡灵活性、性能与安全性。
掌握这些基础语法，是深入 Vue 世界的第一步。下一篇我们将解析v-bind与单向绑定的高级用法，敬请关注！
如果觉得本文有帮助，欢迎点赞 + 收藏，你的支持是我更新的动力～
