[特殊字符] Vue3 常用指令大全

Vue3 常用指令超全总结！小白也能秒懂（v-model / v-for / v-if 全解析）

---

一、什么是 Vue 指令？

指令就是：以 v- 开头的特殊 HTML 属性，用来给 HTML 元素添加功能。

比如：

• 显示隐藏
• 循环列表
• 双向绑定
• 事件点击
• 只渲染一次...

你可以理解为：Vue 给 HTML 加的"超级技能"

---

二、Vue3 最常用 10 大指令（高频！必背）

1. v-model 双向绑定（最重要）

作用：表单输入框 ↔ 数据 自动同步

<input v-model="keyword" placeholder="搜索关键词" />

const keyword = ref("")

你输入什么，数据就变成什么；
数据改了，输入框自动变。

---

2. v-if / v-else-if / v-else 判断显示隐藏

作用：根据条件显示/移除元素

<div v-if="isLogin">欢迎回来</div>
<div v-else>请先登录</div>

---

3. v-show 显示隐藏（切换 display）

作用：显示/隐藏（不会删除DOM，频繁切换用它）

<div v-show="isShow">我是显示隐藏的内容</div>

✔ v-if 与 v-show 区别

• v-if：直接删除/重建 DOM
• v-show：只是 display: none
• 频繁切换 → v-show
• 只切换一次 → v-if

---

4. v-for 循环列表（超级常用）

作用：循环数组，生成多个标签

<ul>
  <li v-for="item in list" :key="item.id">
    {{ item.name }}
  </li>
</ul>

const list = ref([
  { id:1, name:"小明" },
  { id:2, name:"小红" }
])

必须加 key！必须加 key！

---

5. v-bind 绑定属性（简写 :）

作用：给标签属性绑定数据

完整写法：

<img v-bind:src="imgUrl" />

简写（99%场景用这个）：

<img :src="imgUrl" />
<div :class="{'red': isRed}"></div>

---

6. v-on 绑定事件（简写 @）

作用：点击、输入、回车等事件

完整写法：

<button v-on:click="search">搜索</button>

简写（日常都用这个）：

<button @click="search">搜索</button>
<input @input="handleInput" />

---

7. v-text 显示文本

作用：设置元素文本内容

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

等同于：

<div>{{ username }}</div>

---

8. v-html 渲染 HTML

作用：输出富文本、HTML 内容

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

⚠ 注意：有 XSS 风险，信任内容才用！

---

9. v-once 只渲染一次

作用：元素只渲染一次，提升性能

<div v-once>{{ title }}</div>

---

10. v-pre 跳过编译

作用：原样输出 {{ }}，不解析

<div v-pre>{{ 不会被解析 }}</div>

---

三、高频指令速记表（小白收藏版）

指令	作用	场景
v-model	双向绑定	输入框、表单
v-if	条件判断	显示/删除
v-show	显示隐藏	频繁切换
v-for	循环列表	列表渲染
v-bind(:)	属性绑定	src、class、style
v-on(@)	事件绑定	click、input、change
v-html	渲染HTML	富文本
v-text	文本渲染	显示文字

---

四、小白学习建议

1. 先掌握 6 个核心指令 ：
   v-model / v-if / v-show / v-for / v-bind / v-on
2. 这 6 个能搞定 90% 业务
3. 不用死记，多写自然会

---

五、总结（超级精简）

• Vue 指令 = v- 开头的 HTML 增强属性
• v-model 双向绑定
• v-for 循环列表
• v-if / v-show 显示隐藏
• v-bind 绑定属性
• v-on 绑定事件

学会这些，你就能写 Vue3 项目了！

---

---