VUE 指令大全

最新推荐文章于 2025-09-25 15:15:00 发布

原创最新推荐文章于 2025-09-25 15:15:00 发布 · 485 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

59 篇文章

订阅专栏

本文深入讲解Vue.js中的各种指令，包括v-text、v-html、v-on、v-bind、v-model、v-show和v-if，详细解释了它们的功能、语法及应用场景，帮助读者全面掌握Vue指令的使用。

VUE指令指的是：

以 v- 开头的一组特殊语法称为 Vue指令；

v-text指令：

可以将指令的值渲染在标签内部，但是v-text不会解析标签相当与直接把变量的值当成字符串渲染在页面上；

语法：

        <h2 v-text = "message"></h2>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue指令</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2 v-text = "message"></h2> <!--可以将指令的值渲染在标签内部,但是v-text不会解析标签 相当与直接把变量的值当成字符串渲染 在页面上-->
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               message: '<div>你好</div>',
           },
           methods:{}
        });
    </script>
</body>
</html>

v-html 指令：

会把字符串中的标签解析出来页面上不会显示内容中的标签但是会显示标签中的内容，v-html在项目中通常用来解析富文本；

语法：

        <h2 v-html = "str"></h2>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue指令</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2 v-text = "message"></h2> <!--可以将指令的值渲染在标签内部,但是v-text不会解析标签 相当与直接把变量的值当成字符串渲染 在页面上-->

        <h3 v-html="str"></h3> <!--会把字符串中的标签解析出来页面上不会显示内容中的标签 但是会显示标签中的内容,v-html在项目中通常用来解析富文本-->
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               message: '<div>你好</div>',
               str: '<div>我是v-html指令</div>'
           },
           methods:{}
        });
    </script>
</body>
</html>

v-on 指令：

为元素绑定事件指令，可以将 v-on 缩写成 @ ，比如点击事件（@click）、按下键盘（@keydown）、滚动鼠标事件等；绑定的方法定义在methods中，方法内部可以通过 this关键字可以访问定义在data中的数据；

事件绑定中如果不传任何参数则函数有一个默认参数就是事件对象，如果传递参数并且仍然需要事件对象，可以使用 $event 作为事件的参数，该参数就是事件对象。

语法：

        <input type="button" value="v-on指令" v-on:click= "click"> <br><!--标准写法-->
        <input type="button" value="v-on指令简写" @click= "DoClick"> <!--VUE中提供简写方法；可以直接将v-on:替换成 @-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click= "click"> <br><!--标准写法-->
        <input type="button" value="v-on指令简写" @click= "DoClick"> <!--VUE中提供简写方法；可以直接将v-on:替换成 @-->

    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{},
           methods:{
               click: function(){
                   alert('我是Vue中v-on指令，我的作用是为元素绑定事件，v-on:click= ""');
               },
               DoClick: function(){
                alert('我是Vue中v-on指令，我的作用是为元素绑定事件,简写方法 @click=""');
               }
           }
        });
    </script>
</body>

</html>

问题：当双击h1标签的时候一次往后面加字？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 问题：当双击h1标签的时候一次往后面加字？ -->
    <div id="app">
        <h1 v-on:dblclick="dbl">{{str}}</h1>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               str: '我',
           },
           methods:{
               dbl:function(){
                   this.str+= '真帅'
               }
           }
        });
    </script>
</body>

</html>

经典案例：计数器

当点击减号时span中的值依次减1，当span的值为0，弹出对话框提醒用户已经到底了，当点击加号时span中的值依次加1，当span的值为10，弹出对话框提醒用户已经到头了？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #app {
            font-size: 0;
        }
        button {
            width: 50px;
            height: 22px;
            background-color: rgb(131, 147, 177);
            outline: none ;
            color: #a10303;
            vertical-align: middle;

        }
        span {
            display: inline-block;
            width: 40px;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
            text-align: center;
            background-color: rgb(226, 225, 225);
            vertical-align: middle;

        }
    </style>
</head>
<body>
    <div id="app">
        <button v-on:click="left">-</button>
        <span>{{num}}</span>
        <button v-on:click="right">+</button>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var num;
        var vm = new Vue({
           el:'#app',
           data:{
               num: 0
           },
           methods:{
               left:function(){
                    if(this.num > 0){
                        this.num--;
                    }else{
                        alert('我也是有底线的');
                    }
               },
               right:function(){
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert('可以了 ,要不然下个月要吃土了');
                    }
               }
           }
        });
    </script>
</body>

</html>

另一种方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>当前数字为：{{num}}</h2>
        <button @click="min">-</button>
        <button @click="num++">+</button>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               num : 0
           },
           methods:{
               min:function(){
                   this.num--;
                   if( this.num < 0){
                        this.num = 0;
                   }
               }
           }
        });
    </script>
</body>

</html>

v-on指令补充：

1.事件绑定的方法可以写成函数调用的形式，可以传入自定义参数，但是定义方法时需要定义形参 来接受传入的实参；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1. 事件绑定的方法可以写成函数调用的形式，可以传入自定义参数，
                定义方法时需要定义 形参 来接受传入的实参； -->

        <button @click="doit('已经点过了','不要在点了')">点我</button>  <!-- 这里传递的参数时实参 -->
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{},
           methods:{
               doit:function(O,T){  // 定义方法时，这是定义的形参
                   alert('已提交');
                   console.log(O);
                   console.log(T);
               }
        });
    </script>
</body>

</html>

2. 事件的修饰符

事件的后面跟上 . 修饰符可以对事件触发的对象进项限制，事件的修饰符有多种

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 2. 事件的修饰符 -->
                事件的后面跟上 .修饰符 可以对事件触发的对象进行限制，这里的.enter可以限制触发的按键为回车键，事件的修饰符有多种
        <input type="text" @keyup.enter="n" placeholder="请输入你的用户名">    <!--当按下键盘的回车键才会执行 n 方法-->
    </div> 
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{},
           methods:{
               n:function(){
                   alert('恭喜你');
               }
           }
        });
    </script>
</body>

</html>

v-bind 指令：

设置元素的属性，是一个绑定指令，它可以绑定任何一个标签的任何属性；如果需要动态的增删 class，建议使用对象的方式！

语法格式：

v-bind: 属性名 = "表达式"

在vue中我们可以简写成 :属性名 = "表达式"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 700px;
            height: 400px;
        }
        
    </style>
</head>

<body>
    <div id="app">
        <!-- v-bind 是一个绑定指令，他可以绑定任何一个标签的任何属性 -->
        <img v-bind:src="src" alt="" :title="imgTitle">
        <input type="text" :placeholder = "str">
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               src: '../../img/1.jpg',  
               imgTitle:'我想和你在一起',
               str:"请输入你的账户名和密码",
           },
           methods:{ //是vue中存储函数和方法的地方
           }
        });
    </script>
</body>

</html>

v-bind 指令还可以用来绑定类名class（特殊类名）


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .T {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
<!-- 问题：当鼠标点击的时候添加类名 -->
    <div id="app">
        <!-- v-bind 是一个绑定指令，他可以绑定任何一个标签的任何属性 -->
        <div :class="{T:classT}" @click="classC">
            你在干什么呢？
        </div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               classT: false
           },
           methods:{ //是vue中存储函数和方法的地方
                classC() {
                    this.classT = !this.classT;
                }
           }
        });
    </script>
</body>

</html>

v-model 指令（双向数据绑定）：

获取和设置表单元素的值（双向数据绑定）；监听用户的输入事件以更新数据，无论修改谁的值另外一个都会同步更新！

作用体现在绑定的变量的值跟在浏览器上显示的内容保持一值；

实现原理：

其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-model 是为表单双向绑定属性；
                其实是双向绑定的value属性，value在表单元素中使用；
                作用体现在绑定的变量的值跟在浏览器上显示的内容保持一值 -->
            <input type="text" v-model="message">
            <h2>{{ message }}</h2>
            <button @click="xg">我是老大 我要修改你们里面的所有内容</button> <br>
            <!-- <button @click="dj">请提交你的内容</button> -->

    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               message:'这里是你输入的内容',
           },
           methods:{
               dj:function(){
                    alert(this.message)
               },
               xg:function(){
                    this.message='秀儿，是你吗？？？'
               }
           }
        });
    </script>
</body>

</html>

v-show 指令：

v-show指令的作用是：根据元素值的真假切换元素的显示状态，值为true元素显示（display: block），值为false元素隐藏（display： none）；

原理是修改元素的display属性，实现显示隐藏；

指令后面的内容，最终都会解析为布尔值，数据改变之后，对应元素的显示状态会同步更新；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 1250px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <img :src="imgSrc" :title="imgTit" v-show="show"> <!-- 利用v-bind指令绑定img图片的地址和title属性 -->
        <button @click="change">切换显示与隐藏</button>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               imgSrc: '../../img/High Sierra.jpg',
               imgTit: '这是一张风景照片',
               show: true,
           },
           methods:{
               change:function(){
                    this.show = !this.show
               }
           }
        });
    </script>
</body>

</html>

v-show 中不光可以调用方法，还可以写条件表达式；

　例如：v-show＝“show >= 20”　

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 1250px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-show还可以写条件表达式哦，当show大于20或等于时 才让图片显示 -->
        <img :src="imgSrc" :title="imgTit" v-show="show >= 20"> <!-- 利用v-bind指令绑定img图片的地址和title属性 -->
        <button @click="change">当我大于20时，会有惊喜哦！！！{{show}}</button>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               imgSrc: '../../img/High Sierra.jpg',
               imgTit: '这是一张风景照片',
               show: 10,
           },
           methods:{
               change:function(){
                    this.show++;  // 当button按钮点击时，不断增加
               }    
           }
        });
    </script>
</body>

</html>

v-if 指令：

v-if 指令的作用：根据表达式的真假切换元素的显示与隐藏，和v-show的作用差不多，但区别在于 v-if 操作的是 dom 树元素,而 v-show 则是操作元素的 display属性 , 进行元素的显示与隐藏；

v-if 和 v-show 的区别？

1. v-if 和 v-show 都可以控住元素的显示与隐藏

2. v-if 操作的是 dom 树元素，是否渲染到页面；

3. v-show 控制元素是否显示（其实已经渲染到页面了，操作的是display属性）

表达式的值为true , 元素存在与dom树中 , 为false时 , 元素从dom树中移除;

频繁的切换元素的显示与隐藏 , 建议用v-show , 因为消耗小，反之使用 v-if ;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="change">点击切换显示于隐藏</button>
        <p v-if="show">我是v-if指令</p>
        
        <!-- v-if 中也是可以写条件表达式 -->
        <button @click="t">当我大于10时，我会对你说一句话{{math}}</button>
        <p v-if="math > 10">你是傻逼</p>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               show: false,
               math: 6,
           },
           methods:{
               change:function(){
                   this.show=!this.show;
               },
               t:function(){
                   this.math++;
               }
           }
        });
    </script>
</body>

</html>