Vue3常用指令

原创于 2025-07-09 18:35:17 发布 · 616 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

概念

Vue 3 中的指令是带有 v- 前缀的特殊属性，用于在 DOM 元素上应用特殊的响应式行为。指令的主要作用是当其表达式的值改变时，将某些行为响应式地应用到 DOM 上。

作用

Vue 3 指令的核心作用是提供一种声明式的方式来操作 DOM，使开发者能够更高效、更直观地处理 DOM 交互和数据绑定。

常用类型

内容渲染指令(v-html，v-text)
属性绑定指令(v-bind)
事件绑定指令(v-on)
条件渲染指令(v-show，v-if，v-else-if，v-else)
列表渲染指令(v-for)
双向绑定指令(v-model)

我们后续一个一个讲解

v-html和v-text

v-html有点像是innerHTML,可以将数据作为HTML动态地插入到DOM元素中

v-text优点想是innerText,用于更新textContent的指令，将数据作为纯文本输入

演示代码

<style scoped>

</style>
<template>
    <div v-text="str0"></div>
    <div v-text="str1"></div>
    <div v-html="str0"></div>
    <div v-html="str1"></div>
</template>
<script setup>
    import { ref, resolveDirective } from 'vue' 
    let str0=ref("<span style='color:red' class='str0'>hello,world</span>")
    let str1=ref("hello,world")
</script>

演示结果

作用:将表达式的值解析在双标签中

不同:v-html解析标签，v-text不解析标签

v-bind

v-bind用于绑定HTML的属性

演示代码

<style scoped>

</style>
<template>
    <!-- 完全格式 -->
    <a v-bind:href="number">Bilibili</a><br>
    <!-- 简写 -->
    <a :href="number">Bilibili</a><br>     
</template>
<script setup>
    import { ref} from 'vue' 
    let number=ref("https://www.bilibili.com/")
</script>

演示结果

总结

属性之前加冒号，简写可以没有v-bind

v-bind:属性名="变量名"

:属性名="变量名"

v-on

v-on是 Vue 的核心指令之一，用于监听DOM事件，并且执行对应的JavaScript代码。它是 Vue 实现交互功能的关键指令。

演示代码

<template>
    <div>
        <div>{{ Count }}</div>
        <div><button v-on:click="Add">+1</button></div>
        <div><button v-on:click="Count--">-1</button></div>
        <div><button v-on:click="Subnum(5)">-5</button></div>
        <div><button @:click="Addnum(5)">+5</button></div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
let Count = ref(0)
let Add = function Add() {
    Count.value++;
}
let Subnum = function Sub(n) {
    Count.value -= n
}
let Addnum = function Add(n) {
    Count.value += n
}
</script>
<style scoped></style>

演示结果

v-on可以简写为@

函数需要早JS下声明，必须使用函数变量

v-show和v-if

v-if会根据表达式的真假值完全创建或销毁元素及其事件监听器和子组件

v-if还可以搭配v-else-if和v-else使用

v-show通过简单地切换 CSS的display属性来控制元素显示/隐藏

演示代码

<template>
<div>
    <div v-bind:class="Elem0" v-show="Effective"></div>
    <div v-bind:class="Elem1" v-if="Effective"></div>
</div>
</template>

<script setup>
    import { ref } from 'vue'
    let Effective=ref(false)
    let Elem0=ref("Red")
    let Elem1=ref("Green")
</script>

<style scoped>
.Red{
    background-color: red;
    height: 50px;
}
.Green{
    background-color: green;
    height: 50px;
}
</style>

如果是true

如果是false则什么都不显示

这里的v-if和v-show都是控制元素的显示，如果显示切换的慢则用v-if，如果切换地快则用v-show

搭配v-else-if和v-else

<template>
<div>
    <div v-if="Detection>90">优秀</div>
    <div v-else-if="Detection>60">合格</div>
    <div v-else>不及格</div>
</div>
</template>

<script setup>
    import { ref } from 'vue'
    let Detection=100
</script>

<style scoped>
</style>

演示结果

v-for

v-for是Vue.js 提供的一个指令，其主要功能是基于源数据多次渲染某个元素或者模板块。在构建列表的时候，这个指令十分常用。下面为你详细介绍它的用法、注意要点以及一些示例。

使用格式

<div v-for="(item,index) in Array">{{index}}:{{item}}</div>

Array必须使用ref

演示代码

<template>
    <ul>
        <li v-for="(item,index) in Objarr">{{ index }}:{{item.num1}}</li>
        <li v-for="(item,index) in Objarr">{{ index }}:{{item.num2}}</li>
        <li v-for="(item,index) in Objarr">{{ index }}:{{item.num3}}</li>
        <li v-for="(,index) in Obj"> {{ Obj[index] }}</li>
        <li v-for="(item) in Array">{{ item }}</li>
    </ul>

</template>

<script setup>
    import { ref } from 'vue';
    let Array=ref([0,1,2,3,4,5,6,7])
    let Obj={
        num1:"123",
        num2:"456",
        num3:"789"
    }     
    let Objarr=ref([
        {num1:"123",num2:"456",num3:"789"},
        {num1:"123",num2:"456",num3:"789"},
        {num1:"123",num2:"456",num3:"789"},
        ])   
</script>

<style scoped>
    ul{
        color: red;
    }
</style>

v-for中的key

在 Vue.js 的v-for指令中，key是一个特殊的属性，用于给每个渲染的元素分配一个唯一标识。其核心作用是帮助 Vue.js高效地更新 DOM，以及维护组件状态。

演示代码

<template>
<div class="Title">GCH的书架</div>
<div v-for="(Item,Idex) in Arr" class="Content">
    <span>{{ Item.book }}</span>
    <span>{{ Item.name }}</span>
    <button @click="Func(Idex)">删除</button>
</div>
</template>

<script setup>
    import { ref } from 'vue';
    let Func=(n)=>
    {
        if(window.confirm("Are You Sure???"))
        Arr.value.splice(n,1)
    }
    let Arr=ref([
        {id:1,name:"罗贯中",book:"西游记"},
        {id:2,name:"曹雪芹",book:"红楼梦"},
        {id:3,name:"施耐腌",book:"水浒传"},
        {id:4,name:"罗贯中",book:"三国志"}
    ])
</script>

<style>
    button{
        height: 30px;
    }
    .Content{
        display: flex;
        justify-content: space-around;
        height: 50px;
    }
    .Title{
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    #app{
        margin: 100px auto;
        width: 400px;
        height: 300px;
        border: solid grey;
    }
</style>

当我们删除四个当中最上层的元素时

这里下面三个元素的值都发生了变化，所以当需要变化元素时，vue不会移动其它元素，而是直接修改现有元素的值来实现

但是如果加了key，就不会修改其它元素，而是直接修改