Vue基础教程（42）指令之内置指令：别再说你只懂v-for和v-if了！Vue内置指令“摸鱼”宝典，附能让老板刮目相看的实战代码

最新推荐文章于 2025-11-24 03:44:17 发布

原创

最新推荐文章于 2025-11-24 03:44:17 发布 · 764 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

嘿，哥们儿姐们儿，又来跟Vue“斗智斗勇”了？是不是觉得项目里的代码就像一团毛线，v-for里面套v-if，v-on里面绑v-model，改一处崩全身，debug到怀疑人生？

别慌，今天咱不聊高深的Vuex、Router，就回归初心，好好“盘一盘”Vue最基础、但也最核心的“武功秘籍”——内置指令。它们就像是给你的HTML标签施加的“魔法”，让静态的页面活起来。但很多人啊，用了三年Vue，还是只认识v-for和v-if，这就像你买了一台顶配游戏本，却只用它来扫雷，血亏啊！

所以，坐稳扶好，咱们的“摸鱼”…啊不，“深度分析”专车，这就发车！

第一章：指令是个啥？给HTML标签的“秘密任务书”

简单说，指令就是带有 v- 前缀的特殊属性。你把它写在HTML标签上，就等于给这个标签下达了一个“秘密任务”。

比如，你写个 <div v-if="isShow">我是孙悟空</div>。这行代码其实是在悄悄告诉Vue：“喂，Vue老大，你帮我盯着点数据里的 isShow 这个变量。它要是为 true，你就把我这个<div>变出来；它要是为 false，你就直接把我从DOM树上‘变没’，连根毛都不剩！”

看，是不是比原始的JavaScript用 appendChild 和 removeChild 来回折腾优雅多了？这就是指令的魅力——声明式编程。我们只关心“想要什么结果”，而不必一步步指挥浏览器“该怎么去做”。

第二章：核心指令天团，“C位”出道解析

好了，理论热身完毕，咱们请出今天的主角团，挨个“采访”一下。

1. v-text & v-html：内容填充界的“耿直Boy”和“危险分子”

v-text（耿直Boy）：它的工作超级简单——把一段文本塞进标签里。它跟你直接用双大括号 { { }} 插值差不多，但更“一根筋”。

<template>
  <div>
    <p>用插值：{
  
  { message }}</p>
    <p v-text="message">这个初始内容会被完全覆盖！</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '嘿，我才是最终内容！'
    }
  }
}
</script>

深度分析：v-text 会完全替换掉标签内部的所有内容，包括你一开始写死的文字。所以那个“这个初始内容会被完全覆盖！”根本不会显示。而 { { }} 插值更像是“融合”进去。一般来说，我们更常用 { { }}，因为更灵活。v-text通常在需要完全控制内容时使用。

v-html（危险分子）：这位大哥可就厉害了，它能把字符串当作HTML代码来解析并渲染。听起来很酷？但能力越大，责任越大，用不好就是“灭顶之灾”。

<template>
  <div>
    <p v-text="richText"></p> <!-- 会直接显示字符串 -->
    <p v-html="richText"></p> <!-- 会渲染成加粗的“我是HTML” -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      richText: '<strong>我是HTML</strong>'
    }
  }
}
</script>

深度分析与警告：永远不要用 v-html 来渲染用户提交的内容！这会导致严重的XSS（跨站脚本攻击）。比