三、VUE基础——v-指令（下）

最新推荐文章于 2024-07-15 16:47:55 发布

Wu_967

最新推荐文章于 2024-07-15 16:47:55 发布

阅读量608

点赞数

分类专栏： vue

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

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

6.v-if指令

(1).要点

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

(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).结果

7.v-bind指令

(1).要点

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

<!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.综合案例——图片切换

(1).步骤

编写html，css样式
使用数组创建图片地址数组
创建图片索引ndex
使用v-bind绑定img标签的src属性
使用v-on设置标签的点击事件，并且在vue中编写切换逻辑
使用v-show来设置翻到第一张图片时隐藏向左导航的按键，翻到最后一页时隐藏最右边按键

(2).代码实例

要点说明：

1.Javascipt:void(0)，Javascript中void 是一个操作符，该操作符指定要计算一个表达式但是不返回值。可以使用void实现a标签在点击时不会发生跳转。也可以采用void0取undefined。详细跳转javascipt:void(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>
    <style>
        .center{
            position: relative;
        }
        .left .right{
            color: black;
        }
        .left span{
            position: absolute; 
            top: 0;
            left: 0; 
            margin-top: 100px;
            font-size: 25px;
        }
        .right span{
            position: absolute; 
            top: 0; 
            left: 0;
            margin-left: 280px;
            margin-top: 100px; 
            font-size: 25px;
        }
        img{
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>

    <div id="mask">
        <div class="center" >
            <!-- 图像 -->
            <!-- <img src="image/cat.jpg" alt=""> -->
            <img :src="imgArr[index]" width="300" height="200" alt="">
            <!-- 左箭头 -->
            <a href="javascipt:void(0)" class="left" @click="prev" v-show="index!=0">   <!--index!=0的时候显示左边的按键-->
                <span><</span>
            </a>
            <!-- 右箭头 -->
            <a href="javascipt:void(0)" class="right" @click="next" v-show="index<imgArr.length-1">   <!--index<imgArr.length-1的时候显示右边的按键-->
                <span>></span>
            </a>
        </div>
    </div>
     
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 逻辑
        var mask=new Vue({
            el:"#mask",
            data:{   //图片数组
                imgArr:["image/cat.jpg",
                        "image/image01.jpg",
                        "image/image02.jpg",         
                ],
                index:0  //图片数组索引
            },
            methods: {
                prev:function(){   //翻上一页逻辑
                    if(this.index!=0)
                    {
                        this.index--;
                    }
                },
                next:function(){
                    if(this.index!=this.imgArr.length-1){  //翻下一页逻辑
                        this.index++;
                    }
                    
                }
            }

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

(3).结果

9.v-for指令

(1).要点

v-for指令的作用是根据数据生成列表结构, v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，此外，v-for还可以遍历对象的属性，并且可以和template模板元素一起使用。
v-for经常和数组结合使用
我们可以使用 v-for 指令，将一个数组渲染为列表项。v-for 指令需要限定格式为 item in items 的特殊语法，其中，items 是原始数据数组(source data array)，而 item 是数组中每个迭代元素的指代别名(alias)，item在实际应用中也可换为其他的单词
语法是(index,item) in 数据，如v-for="item in arr"(arr是创建的数组名)
item和index可以结合其他指令一起使用，如结合v-on、v-bind指令完成其他功能
数组长度的更新会同步到页面上，是响应式的

(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">
        <p>1.v-for的基础使用</p>
        <p>v-for和数组几何使用</p>
        <ul>
            <li v-for="item in arr" >{{arr}}</li>    <!--显示arr中所有的数据，其中item代表每一个-->
        </ul><br><br>

        <p>2.使用v-for产生列表结构，在通过其index属性使每一个标签内的元素和树中对应</p>
        <p>v-for和数组结合使用</p>
        <ul>
            <li v-for="(tv,index) in arr">{{index+1}}视频软件：{{tv}}</li>   <!--原本的index为0123，加一之后就变成1234，这里的tv也可以随机更换为其他单词-->
        </ul><br><br>

        <p>3.v-for和v-bind指令结合使用</p>
        <p>v-for和对象数组结合使用</p>
        <!-- 用v-for结合对象数组显示数据 -->
        <h2 v-for="item in vegetables" v-bind:title="item.name" >{{item.name}}</h2><br><br>

        <p>4.v-for和v-on指令结合使用</p>
        <p>v-for和对象数组结合使用</p>
        <input type="button" value="蔬菜增加"  @click="addvegetable">  <!--蔬菜增加减少按钮-->
        <input type="button" value="蔬菜减少"  @click="subvegetable">
        <h4 v-for="vegetable in vegetables" v-bind:title="vegetable.name">{{vegetable.name}}</h4>
    </div>     
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 逻辑
       var app=new new Vue({
           el:"#app",
           data:{
               arr:["爱奇艺","腾讯","芒果","B站"],  //数组
                vegetables:[
                    {name:"西红柿"},
                    {name:"韭菜"},
                    {name:"西蓝花"}
                ]
            },
            methods: {
                addvegetable:function(){  //增加蔬菜逻辑，点击蔬菜增加按钮。vegetables中的数据增加，会影响所有使用vegetables数据的标签
                    this.vegetables.push({name:"土豆土豆"});
                },
                subvegetable:function(){  //减少蔬菜逻辑
                    this.vegetables.shift();      
                }
            }
       })
       
    </script>
</body>
</html>

(3).结果

1.v-for和数组结合使用

2.v-for和对象数组结合使用

10.v-on补充

(1).要点

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
后面跟上.修饰符可以对事件进行限制，如keyup.enter，其他修饰符参考v-on修饰符大全
.enter可以限制触发的按键为回车
事件修饰符有多种

(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">
       <input type="button" value="点击" @click="doIt(666,'老铁')">   <!--老铁这个字符串由于点击事件的绑定是双引号，所以用单引号-->
       <input type="text" @keyup.enter="sayHi">
    </div>     
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 逻辑
       var app=new new Vue({
           el:"#app",
           methods: {
               doIt:function(p1,p2){   //给函数定义形参
                    console.log("做it");
                    console.log("p1");
                    console.log("p2");
               },
               sayHi:function(){
                   alert("吃了没");
               }
           }
       })
       
    </script>
</body>
</html>

(3).结果

11.v-model

(1).要点

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据回合表单元素的值相关联
绑定的数据和表单元素的值是双向绑定的（即改变数据表单的元素也会改变，改变表单元素的值数据也会改变）

(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">
        <!-- 使用v-model指令，在input文本框中内容改变时，h2中的内容也会改变。是因为input和h2绑定的都是message,并且input和meaage是双向绑定 -->
        <p>1.双向绑定</p>
       <input type="text" v-model="message">
       <h2>{{message}}</h2>

       <p>2.非双向绑定</p>
      <input type="text" v-bind:value="test">
      <h3>{{test}}</h3>
    </div>     
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 逻辑
       var app=new new Vue({
           el:"#app",
           data:{
               message:"12345",
               test:"22222"
           }
       })
       
    </script>
</body>
</html>

(3).结果

Wu_967

关注

0
点赞
踩
0

收藏

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

6.v-if指令(1).要点 v-if指令的作用是根**据表达式的真假切换元素的显示状态** 其本质是**通过操纵dom元素来切换显示状态** v-if表达式为true，元素存在于dom树中，为false，从dom树中移除显示状态要频繁切换使用v-show，反之使用v-if，**前者的切换只改变display属性，消耗小；后者的切换直接将元素在dom树中删除** **(2).代码实例**(2).代码实例<!DOCTYPE html>&l...
复制链接

扫一扫

专栏目录