1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 点击按钮控制div隐藏和显示

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

时间:2020-08-17 13:31:38

相关推荐

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

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

方法一 引入vue

<html><head><script src="/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。