Vue中的指令

v-bind

动态绑定一个或多个属性到表达式。常用于绑定 class、style 或组件 props。

<div v-bind:class="{ active: isActive }"></div>
<!-- 简写 -->
<div :class="{ active: isActive }"></div>
 

v-model

实现表单输入元素与数据的双向绑定，支持修饰符如 .lazy、.trim 等。

<input v-model="message" />
 

v-on

绑定事件监听器，支持修饰符如 .stop、.prevent 等。

<button v-on:click="handleClick">点击</button>
<!-- 简写 -->
<button @click="handleClick">点击</button>
 

v-if / v-else-if / v-else

条件渲染元素，根据表达式真假决定是否渲染 DOM。

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>
 

v-show

通过切换 display CSS 属性控制元素显示/隐藏，适合频繁切换的场景。

<div v-show="isVisible">显示内容</div>
 

v-for

基于源数据循环渲染元素或组件，需配合 :key 提升性能。

<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.name }}
</li>
 

v-text / v-html

更新元素的 textContent 或 innerHTML，v-html 需注意 XSS 风险。

<span v-text="rawText"></span>
<div v-html="rawHtml"></div>
 

v-pre / v-cloak / v-once

• v-pre：跳过编译，保留原始内容。
• v-cloak：隐藏未编译的模板直到实例就绪。
• v-once：只渲染一次，后续数据变化不更新。

<div v-pre>{{ 原始文本 }}</div>
<div v-cloak>{{ message }}</div>
<div v-once>{{ staticContent }}</div>