Vue 中指令有哪些？
最新回答
泛黄的咖啡店
2026-10-24 21:16:50
Vue中的指令是以v-开头的特殊属性，用于将表达式与DOM元素或组件绑定，以改变其行为或外观。以下是Vue中常用的指令分类说明：
一、基础指令v-if
根据表达式真假动态添加/移除元素，条件为false时元素从DOM中完全移除。
示例：
<div v-if="isShow">显示内容</div>v-show
通过CSS的display属性控制元素显示/隐藏，元素始终存在于DOM中。
示例：
<div v-show="isShow">显示内容</div>v-for
循环渲染数组或对象，需配合:key唯一标识以提高性能。
示例：
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
v-bind（简写:）
动态绑定属性或组件props，如class、style等。
示例：
<div :class="{ active: isActive }">动态类名</div>v-model
表单输入的双向数据绑定，适用于input、select等元素。
修饰符：
.trim：自动去除首尾空格。
.lazy：在change事件后同步数据。
示例：
<input v-model.trim="message" />
- v-on（简写@）
监听DOM事件或自定义事件，可绑定方法或内联语句。
示例：
<button @click="handleClick">点击</button>
v-html
渲染原始HTML（需注意XSS风险，仅用于可信内容）。
示例：
<div v-html="rawHtml"></div>v-text
更新元素的textContent，会覆盖原有内容。
示例：
<span v-text="message"></span>
- v-else / v-else-if
必须与v-if或v-show配合使用，实现条件分支。
示例：
<div v-if="score > 90">优秀</div><div v-else-if="score > 60">及格</div><div v-else>不及格</div>
v-once
元素和组件仅渲染一次，后续数据变化不更新。
示例：
<span v-once>{{ staticMessage }}</span>v-pre
跳过编译，直接输出原始内容（如{{ }}）。
示例：
<div v-pre>{{ 不编译的内容 }}</div>
v-slot（简写#）
用于具名插槽或作用域插槽，在组件化开发中传递模板片段。
示例：
<template #header="{ title }"> <h1>{{ title }}</h1></template>v-memo（Vue 3新增）
记忆渲染，依赖值未变化时跳过组件更新。
示例：
<div v-memo="[dependency]">{{ expensiveRender }}</div>
v-cloak
解决模板渲染时的闪动问题，配合CSS使用。
示例：
<div v-cloak>{{ message }}</div><style>[v-cloak] { display: none; }</style>v-lazy（需插件支持）
图片或组件的懒加载，提升页面性能。
- 避免v-for与v-if共用：Vue会优先处理v-for，可能导致性能问题。建议通过计算属性过滤数据。
- key的重要性：在使用v-for时，始终绑定唯一的key以优化虚拟DOM更新。
这些指令覆盖了Vue开发中的常见需求，合理使用可显著提升开发效率和代码可维护性。
热门标签
