Vue基本指令：v-on,v-if,v-mode

Poetry-Distance

已于 2023-02-28 09:56:20 修改

阅读量1.4k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-02-27 18:13:04 首次发布

本文链接：https://blog.csdn.net/qi341500/article/details/129236117

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue基本指令

1、v-text指令：设置标签的文本值

2、v-html指令：设置标签的innerHTML

3、v-on指令：为元素绑定事件

4、v-on:传参

5、v-show指令：根据真假切换元素的显示状态

6、v-if指令：根据表达式的真假切换元素的显示状态

7、v-bind：为元素绑定属性

8、v-for指令：根据数据生成列表结构

9、v-mode：便捷的设置和获取表单元素的值

Vue基本指令

1、v-text指令：设置标签的文本值

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

v-text与{{}}的区别

使用v-text，标签内在加内容显示不出来

<h2 v-text="message + '!'">这里的内容不显示</h2>

在{{}}后面添加别的内容可以显示

<h2>{{ message + '!'}}这里的内容显示</h2>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text 指令</title>
</head>
<body>
    <div id="app">
       <h2 v-text="message + '!'">不显示</h2>
        <h2 v-text="info">不显示</h2>
        <h2>{{ message + '!'}}显示</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好，Vue！",
                info: "前端框架"
            }
        })
    </script>

</body>
</html>

2、v-html指令：设置标签的innerHTML

v-text：指令无论内容为什么都显示的是文本内容

v-html：指令有html结构会被解析为标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html指令</title>
</head>
<body>
    <div id="app">
        <p v-text="content"></p>
        <p v-html="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='https://www.taobao.com/'>淘宝</a>"
            }
        })
    </script>
</body>
</html>

3、v-on指令：为元素绑定事件

事件写在：methods中，事件名不用写on

语法：v-on：事件 = 绑定的事件名称

简写方法：@事件 = 绑定的事件名称

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击" @dblclick="doIt">
        <h2 @click="changeFood">点击：{{food}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food: "西红柿炒蛋"
            },
            methods: {
                doIt: function(){
                    alert("111")
                },
                changeFood: function(){
                    this.food +="好吃！"
                }
            }
        })
    </script>
</body>
</html>

4、v-on:传参

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'你好')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                doIt: function(p1,p2){
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function(){
                    alert("111")
                }
            }
        })
    </script>

</body>
</html>

练习：计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub"> - </button>
            <span> {{num}} </span>
            <button @click="add"> + </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods: {
                add: function(){
                    if(this.num <10){
                        this.num++;
                    }else{
                        alert("已到最大值！")
                    }
                },
                sub: function(){
                    if(this.num >0){
                        this.num--;
                    }else{
                        alert("已到最小值！")
                    }
                }
            }
        })
    </script>
</body>
</html>

5、v-show指令：根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏，指令后面的内容,最终都会解析为布尔值，值为true元素

显示,值为false元素隐藏

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="增加年龄" @click="addAge">
        <img v-show="isShow" src="./06.jpg">
        <img v-show="age>=18" src="./06.jpg">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: 17
            },
            methods: {
                changeIsShow: function(){
                    this.isShow = !this.isShow;
                },
                addAge: function(){
                    this.age++;
                }
            }
        })
    </script>
</body>
</html>

6、v-if指令：根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if指令</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">张三</p>
        <p v-show="isShow">张三-20</p>
        <p v-if="temperature > 30">热死了</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                temperature: 28
            },
            methods: {
                toggleIsShow: function(){
                    this.isShow = !this.isShow;
                    this.temperature++;
                }
               
            }
        })
    </script>
</body>
</html>

7、v-bind：为元素绑定属性

完整写法是v-bind:属性名

简写的话可以直接省略v-bind，只保留:属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle + '!'" 
        :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle + '!'" 
        :class={active:isActive} @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "./06.jpg",
                imgTitle: "柴犬",
                isActive: false
            },
            methods: {
                toggleActive: function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>
</html>

8、v-for指令：根据数据生成列表结构

数组经常和v-for结合使用

语法是：( item,index ) in 数据

item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上,是响应式的

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index + 1}} 兴趣：{{item}}
            </li>
        </ul>
        <h2 v-for="item in music">
            {{item.name}}
        </h2>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["唱","跳","rap","篮球"],
                music: [
                    {name: "琵琶行"},
                    {name: "哪里都是你"}
                ]
            },
            methods: {
                add: function(){
                    this.music.push({name: "起风了"});
                },
                remove: function(){
                    this.music.shift();
                }
            }
            
        })
    </script>
</body>
</html>

9、v-mode：便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-modle="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message: " Hello Vue! "
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM: function(){
                    this.message = "Hellow word!"
                }
            }
        })
    </script>
</body>
</html>