点击按钮控制div隐藏和显示

猫柠不GOOD

已于 2022-11-24 15:50:36 修改

阅读量4.7k

点赞数 6

分类专栏：前端文章标签： vue.js javascript 前端 html css

于 2022-11-23 17:20:59 首次发布

本文链接：https://blog.csdn.net/weixin_41595613/article/details/128004168

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要求：有一个按钮，点击按钮使得div消失，之后将按钮文字改变为显示，再次点击按钮使得div出现，依次类推。效果如下图

方法一引入vue

<html>
	<head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	</head>
	<body>
        <div id="app1">
            <input type="button" @click="flag = !flag" :value='able()'>
            <div id="div1" style="width: 200px; height: 200px; background-color: rgb(255, 136, 0);" v-show="flag"></div>
        </div>
	</body>
    <script>
        var app = new Vue({
        el: '#app1',
        data: {
            flag: true,
        },
        methods:{
            able(){
                if (this.flag){
                    return '隐藏'
                }else{
                    return '显示'
                }
            }
        }
        })
    </script>
</html>

方法二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function show(){
				var btnobj=document.getElementById("btn1");
				var divobj=document.getElementById("div1");
				if(btnobj.value=="隐藏"){
					divobj.style.display="none";
					btnobj.value="显示";
				}else{
					divobj.style.display="block";
					btnobj.value="隐藏";
				}
			}
		

		</script>
	</head>
	<body>
	<input type="button" value="隐藏" onclick="show()" id="btn1">
	<div id="div1" style="width: 200px; height: 200px; background-color: rgb(255, 136, 0);">
		
	</div>
	</body>
</html>