vue指令

^O^Wanna

于 2021-06-14 14:36:47 发布

阅读量79

点赞数

分类专栏： vue基础文章标签： vue

本文链接：https://blog.csdn.net/qq_54088653/article/details/117903824

版权

vue基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的v-show、v-if和v-bind指令的用法。v-show根据表达式的真假切换元素的显隐，通过修改display实现，适合频繁切换。v-if则直接操作DOM，当表达式为假时元素从DOM树中移除，更适合不频繁切换。v-bind用于动态绑定元素属性，包括src、title和class等，可以使用简写形式并支持对象方式设置class。

摘要由CSDN通过智能技术生成

v-show：据表达值的真假，切换元素的显示和隐藏

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

指令后的内容，最终解析为布尔值

值为true元素显示，false隐藏

数据改变后，对应元素的显示状态会同步更新

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <img src="img/classroom.jpg" v-show="true" alt="" width="200px">
        <img src="img/classroom.jpg" v-show="age>=18" alt="" width="200px">
        <img src="img/classroom.jpg" v-show="isShow" alt="" width="400px">
        <br>
        <button @click="changeShow">出现/消失</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: "18"
            },
            methods: {
                changeShow: function() {
                    this.isShow = !this.isShow;
                }
            }

        })
    </script>
</body>

</html>

v-if：根据表达式的真假，切换元素的显示和隐藏（操作dom元素）

表达式为true元素存在dom树中，为false，从dom树中移除

使用v-if元素，隐藏时会占据原有空间

频繁的切换使用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">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span v-if="isShow">我是span</span>
        <br>
        <span v-if="age>=18">年满18</span>
        <br>
        <button @click="changeShow">出现/消失</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: "18"
            },
            methods: {
                changeShow: function() {
                    this.isShow = !this.isShow;
                }
            }

        })
    </script>
</body>

</html>

v-bind：设置元素的属性（比如 :src,title,class)

语法：v-bind:属性名=表达式

简写：:属性名=表达式

需要动态增删class建议使用对象的方式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid red;
            padding: 20px;
            background-color: sandybrown;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="" width="300px">
        <br>
        <br>
        <img :src="imgSrc" alt="" width="300px" :title="imgTitle" :class="isBox?'box':''" @click="changeClass">
        <br>
        <br>
        <!-- 对象写法 是否添加box类 取决于isBox-->
        <img :src="imgSrc" alt="" width="300px" :title="imgTitle" :class="{box:isBox}" @click="changeClass">

    </div>
    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "img/classroom.jpg",
                imgTitle: "教室",
                isBox: false
            },
            methods: {
                changeClass: function() {
                    this.isBox = !this.isBox
                }
            }
        })
    </script>
</body>

</html>

案例二、切换图片

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        html,
        body {
            min-height: 100vh;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(236, 236, 236);
        }
        
        #mark {
            background-color: white;
            padding: 20px;
            position: relative;
        }
        
        a {
            background-color: rgba(184, 184, 184, 0.712);
            width: 60px;
            display: block;
            height: 100px;
            line-height: 100px;
            color: white;
            font-size: 3rem;
            position: absolute;
            text-align: center;
            cursor: pointer;
        }
        
        .left {
            left: 30px;
            top: 50%;
            margin-top: -50px;
        }
        
        .right {
            right: 30px;
            top: 50%;
            margin-top: -50px;
        }
        
        img {
            width: 891px;
            height: 521.35px;
        }
    </style>
</head>

<body>
    <div id="mark">
        <div class="img">
            <img :src="imgSrcArr[index]" alt="">
            <a class="left" @click="prev" v-show="index>0">
                <</a>
                    <a class="right" @click="next" v-show="index<imgSrcArr.length-1">></a>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#mark",
            data: {
                imgSrcArr: [
                    "img/1.jpg",
                    "img/2.jpg",
                    "img/3.jpg",
                    "img/4.jpg",
                    "img/5.jpg",
                    "img/6.jpg",
                    "img/7.jpg",
                    "img/8.jpg"
                ],
                index: 0,
                // index指的是索引
            },
            methods: {
                // 上一张
                prev: function() {
                    this.index--;
                },
                // 下一张
                next: function() {
                    this.index++;
                }
            }
        })
    </script>
</body>

</html>