二、VUE基础——v-指令（上）

最新推荐文章于 2023-04-23 10:17:52 发布

Wu_967

最新推荐文章于 2023-04-23 10:17:52 发布

阅读量419

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41841658/article/details/115053532

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.v-text指令

(1).要点：

v-text指令用于设置标签的文本内容(textContent)
v-text会替换全部的内容，使用插值表达式{{}}可以替换指定内容，一般使用插值表达式较为方便！

(2).代码实例：

<!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">
        <!-- v-text设置标签的文本属性(textContent) -->
        <p>1.使用v-text设置标签的文本属性</p>
        <h2 v-text="message"></h2>    <!--会将v-text中的message全部替换成vue中的data中的message-->
        <h2 v-text="info"></h2><br>


        <!-- 如果要进行文本替换，需要使用{{message}}这种方式，其他的用法或不方便或不被识别 -->
        <p>2.对插值表达式即用法{{message}}类似的，和v-text指令替换文本</p>
        <h2>{{message}}深圳</h2>
        <h2 v-text="message">深圳</h2><br>
      

        <!-- 表达式 -->
        <p>3.使用表达式进行替换文本</p>
        <h2 v-text="message+'!'">深圳</h2>
        <h2>{{message+"!"}}</h2>

    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
       var app=new Vue({
           el:"#app",
           data:{
               message:"vue基础",     //字符串数据
               info:"vue基础!!!"
           }
       })
    </script>
</body>
</html>

(3).结果：
在这里插入图片描述

2.v-html指令

(1).要点

v-html指令的作用是设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

(2).代码实例

<!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">
        <!-- v-html设置标签的文本，与v-text效果一致 -->
        <!-- v-text设置标签的文本属性 -->
        <p>1.v-text和v-html设置标签文本内容</p>
        <h2 v-text="message"></h2>
        <h2 v-html="message"></h2><br>
		
		<!-- v-html可以解析html结构，v-text不能解析html结构 -->
        <p>2.v-text和v-html解析html结构</p>
        <h2 v-text="info"></h2>
        <h2 v-html="info"></h2><br>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
       var app=new Vue({
           el:"#app",
           data:{
               message:"深圳",
               info:"<a href='http://www.baidu.com'>百度一下</a>"
           }
       })
    </script>
</body>
</html>

(3).结果
在这里插入图片描述

3.v-on指令

(1).要点

v-on指令的作用是为元素绑定事件
事件名不需要写on
v-on 指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问data中的数据

(2).用法

<input type="button" value="v-on指令" v-on:事件名="方法名">
<input type="button" value="v-on指令" @事件名="方法名">

(3).代码实例

<!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">
        <!-- v-on绑定单击事件 -->
        <input type="button" value="v-on指令" v-on:click="doIT">

        <!-- v-on简写为@绑定点击事件 -->
        <input type="button" value="v-on简写" @click="doIT">

        <!-- 绑定双击事件 -->
        <input type="button" value="双击事件" @dblclick="doIT">

        <!-- 点一下西红柿炒蛋就多一个“真好吃” -->
        <h2 @click="changeFood">{{food}}</h2> 
        
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
       var app=new Vue({
           el:"#app",
           data:{
              food:"西红柿炒蛋"
           },

           methods: {
               doIT:function(){
                    alert("做IT");
               },

               changeFood:function(){     //通过this访问data中的数据
                   this.food+="真好吃！"
               }
           },
       })
    </script>
</body>
</html>

(4).结果

单击v-on指令按钮
点一下西红柿炒蛋就多一个真好吃！

4.案例-计数器

(1).步骤

data中定义数据，比如：num
methods中添加两个方法：比如add(增加)，sub(递减)
使用v-text将num设置给span标签
使用v-om将add和sub分别绑定给+，-按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递减，否则提示

(2).代码实例

实现点击+按钮计数器就增加，点击-按钮计数器就减少，增加的上限为10，减少的下限为0。

<!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>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 计数器功能区 -->
        <!-- 计数器样式 -->
        <center>
            <div class="input-num">
                <button class="btn btn-success" v-on:click="add">+</button>
                <span v-text="num"></span>
                <button class="btn btn-default" @click="sub">-</button>
            </div>
        </center>
        
        
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 计数器逻辑
        var app=new 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>

(3).结果

初始

在这里插入图片描述

点击增加
点击减少
在这里插入图片描述
超过上限或下限

5.v-show指令

(1).要点

v-show指令的作用是根据真假切换元素的显示状态
原理是修改元素的display属性来实现显示和隐藏
v-show指令后面的内容都会解析为布尔值
v-show值为true元素则显示，值为false元素隐藏
v-show中数据改变之后，对应元素的显示状态会同步更新
v-show要写在标签的其他属性之前，否则不起作用，例如：
<img v-show="false src="https://img.php.cn/upload/article/000/000/039/5e16ecf39fdf0228.jpg" ">

(2).代码实例

实现点击按钮实现图片的显示与隐藏

<!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>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 计数器功能区 -->
        <!-- 计数器样式 -->
        <center>
            <div id="app">
                <p>1.当v-show为true时img显示，为false时隐藏</p>
                <img v-show="true" src="https://img.php.cn/upload/article/000/000/039/5e16ecf39fdf0228.jpg" ><br><br><br><br>

                <p>2.点击切换显示状态<p>
                <input type="button" value="点击切换显示状态" @click="changeIsshow">   <!--设置点击事件-->
                <img v-show="isshow" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/06c24de89eaf84fd17426b36107d7f4a.jpg?w=2452&h=920" width="50%" height="50%"><br><br><br><br>

                <p>3.18岁以上查看图片</p>
                <input type="button" value="点击累加年龄，默认为17岁" @click="changeAge">
                <img v-show="age>=18" src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" >
            </div>
        </center>
        
        
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 计数器逻辑
        var app=new new Vue({
            el:"#app",
            data:{
                isshow:false,
                age:17
            },
            methods: {
                changeIsshow:function(){
                    this.isshow=!this.isshow;   //isshow初始为false，调用该方法可以实现点击按钮切换显示状态
                },
                changeAge:function(){
                    this.age++;    //age初始为17，调用该方法可以实现年龄累加
                }
            }
        })
    </script>
</body>
</html>

(3).结果
在这里插入图片描述

6.v-if指令

(1).要点

v-if指令的作用是根据表达式的真假切换元素的显示状态
其本质是通过操纵dom元素来切换显示状态
v-if表达式为true，元素存在于dom树中，为false，从dom树中移除
显示状态要频繁切换使用v-show，反之使用v-if，前者的切换只改变display属性，消耗小；后者的切换直接将元素在dom树中删除

**(2).代码实例**

<!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>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="app">
        <center>
            <div id="app">
                <p>1.当v-if为true时img显示，为false时隐藏</p>
                <img v-if="true" src="https://img.php.cn/upload/article/000/000/039/5e16ecf39fdf0228.jpg" width="30%" height="30%"><br>

                <p>2.点击切换显示状态<p>
                <input type="button" value="点击切换显示状态" @click="changeIsshow">   <!--设置点击事件-->
                <p v-show="isshow">v-show显示</p>   <!--隐藏状态display为none-->
                <p v-if="isshow">v-if显示</p>      <!--隐藏状态直接注释掉了这个p元素，即直接在dom树中删除元素-->

            </div>
        </center>
        
        
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 逻辑
        var app=new new Vue({
            el:"#app",
            data:{
                isshow:false
            },
            methods: {
                changeIsshow:function(){
                    this.isshow=!this.isshow;   //isshow初始为false，调用该方法可以实现点击按钮切换显示状态
                }
            }
        })
    </script>
</body>
</html>

**(3).结果** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210323195014609.gif#pic_center)

7.v-bind指令

(1).要点

v-bind指令的作用是为元素绑定属性
v-bind的完整用法是v-bind:属性名
v-bind的简写方式可以直接省略v-bind，只保留**:属性名**
需要动态的增删class可以使用三元表达式，也可以使用对象的方式，但是建议使用对象的方式，在以下代码中有所实现

**(2).代码实例**

<!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>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .active{  /*设置active的样式*/
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <center>
            <div id="app">
                <p>1.使用v-bind绑定数据</p>
                <img v-bind:src="imgSrc"><br><br><br>

                <p>2.使用v-bind形式写法设置元素的src、title、class</p>
                <!--使用对象的方式绑定属性-->
                <img v-bind:src="imgSrc" v-bind:title="imgTitle" v-bind:class="{active:isActive}" @click="toggleActive"> <br><br><br>  

                <p>2.使用简化的v-bind形式写法设置元素的src、title、class</p>
                <!--使用三元表达式的方式绑定属性-->
                <img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="toggleActive">  
            </div>
        </center>
        
        
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 逻辑
        var app=new new Vue({
           el:"#app",
           data:{     //设置属性中绑定的数据
            imgSrc:"https://www.baidu.com/img/flexible/logo/pc/result.png",
            imgTitle:"百度一下你就知道",    
            isActive:false
           },
           methods: {
               toggleActive:function(){
                   this.isActive=!this.isActive;
               }
           }

        })
    </script>
</body>
</html>

**(3).结果**

8.v-if指令

(1).要点

**(2).代码实例**

**(3).结果**

9.v-if指令

(1).要点

(2).代码实例

**(3).结果**

Wu_967

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二、VUE基础——v-指令（上）

1.v-text指令(1).要点：v-text指令用于设置标签的文本内容(textContent)v-text会替换全部的内容，使用插值表达式{{}}可以替换指定内容，一般使用插值表达式较为方便！(2).代码实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
复制链接

扫一扫