v-text 是 Vue 3 中用于绑定纯文本的指令，直接设置 textContent，不解析 HTML、不支持表达式，会完全替换元素子节点；适用于安全渲染、细粒度更新及纯变量文本场景。
v-text 是 Vue 3 中用于绑定纯文本内容的内置指令，它和 {{ }} 插值语法都能显示数据，但作用机制和适用场景有明确区别。如果你希望用 v-text 替代双大括号来绑定纯文本，核心在于理解它的行为本质：它直接设置元素的 textContent 属性，不解析 HTML，也不支持插值表达式中的复杂逻辑。
什么时候该用 v-text 而不是 {{ }}
当你要确保内容被当作纯文本渲染、避免意外的 HTML 解析或 DOM 注入风险时，v-text 更安全；它也适合在需要统一控制文本内容更新时机（比如配合响应式系统做细粒度更新）的场景中使用。
-
v-text会完全替换元素的子节点，包括原有文本和其他元素，而{{ }}只替换大括号所在位置的内容 -
v-text不支持表达式运算、方法调用或三元操作，只接受一个响应式变量或简单路径（如user.name），不能写v-text="count + 1" - 如果模板中某段文字完全由一个变量决定，且不含任何静态文本或其他插值，
v-text的语义更清晰、性能略优
基本写法与等效对比
假设组件中有 const title = ref('欢迎来到 Vue 3')：
- 插值写法：
<p>{{ title }}</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11726" title="Springboot Vue Builder"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="Springboot Vue Builder" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11726" title="Springboot Vue Builder">Springboot Vue Builder</a> <p>从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。</p> </div> <a href="/xiazai/skill11726" title="Springboot Vue Builder" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> -
v-text写法：<p v-text="title"></p>或<p v-text="title">这段文字会被整个替换</p>
注意：第二个例子中，v-text 会把 <p></p> 内所有内容（包括“这段文字会被整个替换”）全部清空，只留下 title 的值。
常见误区与注意事项
v-text 不是 {{ }} 的“增强版”，而是不同定位的工具。误用容易导致内容丢失或逻辑混乱。
- 不要在
v-text中写表达式，例如v-text="item.name + ' - ' + item.id"是非法的，应改用计算属性或方法返回拼接结果 - 如果需要混合静态文本和变量（如“用户：{{ name }}”），必须用
{{ }}，v-text无法实现这种组合 -
v-text和v-html互斥——前者防 XSS，后者开放 HTML 渲染，二者不可混用在同一元素上
与 v-html、v-once 的协同使用
虽然 v-text 本身不处理 HTML 或缓存，但它可以和其它指令搭配使用：
- 加
v-once实现一次性纯文本渲染：<span v-text="msg" v-once></span>，后续数据变化不再更新 - 不能和
v-html同时存在，Vue 会报错；若需原始 HTML，请直接用v-html，放弃纯文本约束 - 与
v-bind无冲突，比如可同时设置 class：<p v-text="desc" :class="{ active: isActive }"></p>
