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

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

# 快速导航

# 前言

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

# 示例展示

# 原生js实现

控制元素的隐藏和显示,主要是控制元素的display:none或display: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>