Vue基础教程（49）内置指令之v-text：Vue内置指令v-text：那个被遗忘的“扫地僧“，用对了代码爽到飞起！

原创于 2025-09-28 08:15:56 发布 · 438 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

嘿，朋友们！今天咱们来聊一个Vue里最容易被小看的指令——v-text。很多人学Vue时瞥它一眼就划走：“不就是个显示文本的嘛，用{{}}不香吗？” 但相信我，等你真正搞懂它，绝对会拍大腿：这货才是深藏不露的“扫地僧”！

一、v-text是什么？简单到让你怀疑人生

先来个灵魂拷问：v-text到底干啥的？官方说法是“更新元素的文本内容”。说人话就是：给标签塞一段文字，简单粗暴，不带任何装饰。

比如你想在某个<div>里显示“你好，世界！”，用v-text长这样：

<div v-text="message"></div>

然后在Vue实例里给message赋值：

new Vue({
  el: '#app',
  data: {
    message: '你好，世界！'
  }
})

页面就会乖乖显示“你好，世界！”——是不是简单到令人发指？但别急，它的威力才刚刚开始！

二、v-text vs {{}}：直男和暖男的对决

既然有双花括号{{}}，为啥还要用v-text？这就好比直男和暖男的区别：v-text是直男，有一说一；{{}}是暖男，灵活但偶尔优柔寡断。

1. 防闪屏神器：v-text的独家绝活
你有没有遇到过页面加载时，先看到一堆{{message}}乱码，然后才变成正常内容？这就是{{}}的“闪屏”现场！因为Vue需要时间解析模板，而v-text直接绑定属性，内容未渲染时元素根本是空的，完美避坑！

对比一下：

<!-- 用{{}}可能会闪屏 -->
<div>{{message}}</div>

<!-- 用v-text稳如老狗 -->
<div v-text="message"></div>

2. 性能小彩蛋：v-text其实更“抠门”
虽然差别微乎其微，但v-text的更新机制更直接。{{}}需要解析插值语法，而v-text直接瞄准DOM的textContent属性。在需要频繁更新的场景（比如实时日志），v-text可能偷偷帮你省下几毫秒！

3. 安全性：v-text天生防XSS
无论内容里是否包含HTML标签，v-text一律当纯文本处理。比如：

data: {
  message: '<script>alert("嘿，你被攻击了！")</script>'
}

用v-text会原样输出字符串，而v-html则会执行脚本——关键时刻，直男的安全感爆棚！

三、实战！从青铜到王者的v-text玩法

光说不练假把式，下面直接上代码，带你玩转v-text！

示例1：基础用法（青铜级）

<div id="app">
  <p v-text="title"></p>
  <span v-text="subTitle"></span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    title: 'Vue入门指南',
    subTitle: '带你解锁新技能'
  }
})
</script>

效果：
页面上显示两行：
Vue入门指南
带你解锁新技能

示例2：动态绑定（黄金级）

v-text当然支持动态数据！比如结合计算属性：

<div id="app">
  <h2 v-text="pageTitle"></h2>
  <button @click="changeTitle">点我换标题！</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseTitle: '当前页面：'
  },
  computed: {
    pageTitle() {
      return this.baseTitle + new Date().toLocaleTimeString()
    }
  },
  methods: {
    changeTitle() {
      this.baseTitle = '动态页面：'
    }
  }
})
</script>

效果：
点击按钮后，标题会从“当前页面：XX:XX:XX”变成“动态页面：XX:XX:XX”——时间还在实时走动！这就是计算属性的魔力。

示例3：配合过滤器（钻石级）

虽然Vue 3砍掉了过滤器，但Vue 2里v-text+过滤器简直是黄金搭档：

<div id="app">
  <p v-text="price | currency"></p>
</div>

<script>
new Vue({
  el: '#app',
  data: { price: 99.9 },
  filters: {
    currency(value) {
      return '¥' + value.toFixed(2)
    }
  }
})
</script>

效果：
直接显示“¥99.90”，无需在JS里处理格式！

示例4：复杂表达式（王者级）

谁说v-text只能绑简单变量？表达式照样拿下！

<div id="app">
  <p v-text="`用户：${user.name}，年龄：${user.age}岁`"></p>
  <p v-text="isVIP ? '尊贵的VIP会员' : '普通用户'"></p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    user: { name: '张三', age: 28 },
    isVIP: true
  }
})
</script>

效果：
根据数据动态显示：“用户：张三，年龄：28岁”和“尊贵的VIP会员”。模板字符串+三目运算符，爽到飞起！

四、那些年，我们踩过的v-text的坑

当然，v-text也不是完美无缺。新手最常掉进这两个坑：

坑1：和元素原有内容互斥

<!-- 错误示范 -->
<div v-text="message">这里原有文字</div>

最终只会显示message的内容，原有文字直接被覆盖！v-text天生霸道总裁，眼里容不下别人。

坑2：忘记v-text是“一次性”的
如果message包含HTML标签：

data: { message: '我是<strong>加粗</strong>文字' }

v-text会原样输出字符串，而非渲染加粗效果。需要渲染HTML？请召唤v-html指令（但务必注意XSS风险！）。

五、总结：什么时候该抱起v-text？

经过以上深度剖析，咱们来个终极总结：

抱起v-text的三大场景：

追求无闪屏体验：特别是首页标题、用户昵称等关键内容。
性能敏感区域：需要频繁更新的文本，比如聊天室、实时数据仪表盘。
内容纯文本化：防止用户输入HTML标签导致布局错乱。

放下v-text的两种情况：

需要混合静态和动态内容：比如“欢迎回来，{{username}}！”。
需要渲染HTML：老老实实用v-html（并做好内容消毒）。

最后送大家一句真理：工具无高低，场景定输赢。v-text这个“扫地僧”，平时不显山露水，但用对场景绝对能给你惊喜。现在就去你的项目里试试它吧！