# js如何设置元素的显示和隐藏

# 快速导航

# 前言

如何通过单机一个按钮,来达到实现隐藏和显示图片的切换效果

# 示例展示

# 原生js实现

控制元素的隐藏和显示,主要是控制元素的display:nonedisplay:block,就可以了的,具体示例代码如下所示

// 隐藏或显示元素
function showOrHide() {
    // 得到图片的DOM
    var myImg = document.getElementById("myImg");
    var display = myImg.style.display;   // 获取当前图片的显示的样式,display属性
    if(display !='none') {  // 图片是否是display:none,隐藏
        myImg.style.display = 'none';
    }else {
        myImg.style.display = 'block';  // 取消隐藏
    }
}
1
2
3
4
5
6
7
8
9
10
11

如下是Html模板代码

<p>
    <input type="button" value="隐藏或显示" onclick="showOrHide()"><br />
    <!--定义图片元素--->
    <img id="myImg" src="xxx.jpg" width="100" height="100" />
</p>
1
2
3
4
5

# Vue实现的代码

<template>
    <div class="elem-wrap">
        <div>
            <el-button type="primary" @click="handleBtn">{{showText}}</el-button>
        </div>
        <div v-show="isStatus">
            <img class="medium-zoom lazy" loading="lazy" src="https://coder.itclan.cn/images/rightbar/itclancoder-code.jpg" width="120" height="120" alt="">
        </div>
    </div>
</template>

<script>
    export default {
        name: "elemShowHide",
        data() {
            return {
                isStatus: true,
            }
        },

        computed: {
            showText() {
                return this.isStatus == true?'显示':'隐藏'
            }
        },
        
        methods: {
            // 点击按钮,显示和隐藏
            handleBtn() {
                if(this.isStatus) {
                    this.isStatus = true;
                }else {
                    this.isStatus = false;
                }
                this.isStatus = !this.isStatus;
            }
        }
    }
</script>

<style lang="scss" scoped>
.elem-wrap {
    display:flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 20px;
    text-align: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

上面用vue实现控制元素的显示和隐藏是使用v-show,结合isStatus的一个状态,truefalse去控制的

相当于就是实现一个开关的功能

# 具体分析

在网页中,控制切换元素的隐藏和显示,是一个比较常见的操作,主要利用的是display属性来操作,值如果是none那么就是隐藏,如果是显示那就是block或``,或inline-block都是可以的

而在Vue当中控制元素的显示和隐藏使用的是v-ifv-show,前者将元素从DOM移除,后者是通过样式实现的,如果频繁的切换显示和隐藏,那么就用v-show

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐