当前位置：首页 > news >正文

Vue3中的常用指令

news 2025/11/11 10:30:49

一、文本与 HTML 渲染：v-text与v-html

1. v-text：纯文本渲染

2. v-html：HTML 内容渲染

二、条件渲染：v-if、v-else、v-else-if

三、列表渲染：v-for

四、事件与属性绑定：v-on与v-bind

1. v-on：事件监听

2. v-bind：属性绑定

五、双向数据绑定：v-model

六、插槽分发：v-slot

总结

在 Vue3 的世界里，指令是连接模板与逻辑的桥梁，它们以v-开头，为我们提供了简洁且强大的 DOM 操作与业务逻辑处理能力。今天，我们就来逐一剖析这些常用指令，带你从入门到精通，让前端开发效率 “飞” 起来。

一、文本与 HTML 渲染：v-text与v-html

1. v-text：纯文本渲染

v-text的作用是将数据纯文本式地插入到元素中，相当于 JavaScript 中的element.textContent。它会覆盖元素原本的内容，且自动进行 HTML 转义，避免 XSS 攻击。

<template><div v-text="message"></div>
</template><script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue3 指令！');
</script>

渲染后，<div>中会直接显示Hello, Vue3 指令！。

2. v-html：HTML 内容渲染

若需要渲染包含 HTML 标签的内容，v-html就派上用场了，它相当于element.innerHTML。注意：使用时需确保内容来源可信，否则易引发 XSS 风险。

<template><div v-html="richContent"></div>
</template><script setup>
import { ref } from 'vue';
const richContent = ref('<strong>这是带HTML标签的内容</strong>');
</script>

渲染后，<div>中会显示加粗的 “这是带 HTML 标签的内容”。

二、条件渲染：v-if、v-else、v-else-if

这组指令用于根据条件动态创建或销毁 DOM 元素，适合条件复杂或切换不频繁的场景（因为 DOM 会真实增删）。

基本用法

<template><div v-if="type === 'A'">类型A</div><div v-else-if="type === 'B'">类型B</div><div v-else>其他类型</div>
</template><script setup>
import { ref } from 'vue';
const type = ref('A');
</script>

当type变化时，对应的<div>会被创建或销毁。

与v-show的区别

很多同学会混淆v-if和v-show，这里做个对比：

指令	渲染机制	性能特点	适用场景
v-if	动态增删 DOM 元素	切换时开销较大	条件不常切换、逻辑复杂的场景
v-show	控制display属性显隐	初始渲染开销略大	频繁切换的场景

v-show示例：

<template><div v-show="isVisible">我可以被频繁切换显隐</div>
</template><script setup>
import { ref } from 'vue';
const isVisible = ref(true);
</script>

三、列表渲染：v-for

v-for用于循环渲染列表数据，支持数组、对象、字符串甚至数字的遍历。

数组遍历

<template><ul><li v-for="(item, index) in list" :key="index">{{ index + 1 }}. {{ item.name }}</li></ul>
</template><script setup>
import { ref } from 'vue';
const list = ref([{ name: 'Vue指令' },{ name: '组件化' },{ name: '响应式' }
]);
</script>

key是为了让 Vue 更高效地复用 DOM，建议使用唯一标识（如 ID）而非索引。

对象与其他类型遍历

（1）对象遍历：v-for="(value, key, index) in obj"

（2）字符串遍历：v-for="(char, index) in 'Vue'"

（3）数字遍历：v-for="num in 3"（渲染 3 次）

四、事件与属性绑定：v-on与v-bind

1. v-on：事件监听

用于给元素绑定事件，可简写为@。支持传参、事件修饰符（如.stop、.prevent）等。

<template><button @click="handleClick('参数')">点击我</button><form @submit.prevent="handleSubmit"><button type="submit">提交</button></form>
</template><script setup>
const handleClick = (param) => {console.log('点击事件触发，参数：', param);
};const handleSubmit = () => {console.log('表单提交（已阻止默认行为）');
};
</script>

2. v-bind：属性绑定

用于绑定 HTML 属性、组件 props 等，可简写为:。

<template><img :src="imgUrl" :alt="imgAlt" :class="{ active: isActive }"><MyComponent :propsData="componentData" />
</template><script setup>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';const imgUrl = ref('https://example.com/vue.png');
const imgAlt = ref('Vue Logo');
const isActive = ref(true);
const componentData = ref({ name: 'Vue指令详解' });
</script>

五、双向数据绑定：v-model

v-model是语法糖，本质是结合v-bind（绑定值）和v-on（监听输入事件），实现表单元素与数据的双向同步。

<template><input v-model="inputValue" type="text" placeholder="请输入内容"><p>你输入的内容：{{ inputValue }}</p><!-- 自定义组件的v-model --><MyInput v-model="customValue" />
</template><script setup>
import { ref } from 'vue';
import MyInput from './MyInput.vue';const inputValue = ref('');
const customValue = ref('自定义组件双向绑定');
</script>

在自定义组件中，v-model默认绑定modelValue prop 和update:modelValue事件，也可通过model选项自定义。

六、插槽分发：v-slot

v-slot（可简写为#）用于组件插槽的内容分发，让组件更具扩展性。

具名插槽

<!-- 父组件 -->
<template><Layout><template #header><h1>页面头部</h1></template><template #footer><p>页面底部</p></template><template #default><p>页面主体内容</p></template></Layout>
</template><!-- Layout组件 -->
<template><div class="layout"><header><slot name="header"></slot></header><main><slot></slot> <!-- 默认插槽 --></main><footer><slot name="footer"></slot></footer></div>
</template>

作用域插槽

若插槽内容需要访问子组件的数据，可使用作用域插槽：

<!-- 父组件 -->
<template><UserList><template #item="{ user }"><p>{{ user.name }} - {{ user.age }}岁</p></template></UserList>
</template><!-- UserList组件 -->
<template><ul><li v-for="user in users" :key="user.id"><slot name="item" :user="user"></slot></li></ul>
</template><script setup>
import { ref } from 'vue';
const users = ref([{ id: 1, name: '张三', age: 20 },{ id: 2, name: '李四', age: 22 }
]);
</script>