记录一下各种隐藏html元素的方法
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div id="rrapp"> <input type="button" value="Vue隐藏DIV" v-on:click="testdisplay1()"> <input type="button" value="根据ID隐藏DIV" v-on:click="testdisplay2()"> <input type="button" value="根据ID隐藏DOM" v-on:click="testdisplay3()"> <input type="button" value="根据类型隐藏标签" v-on:click="testdisplay4()"> <input type="button" value="根据class隐藏DIV" v-on:click="testdisplay5()"> <br/><br/><br/> <div v-show="isdisplay" style=" 100px;height: 100px;background: red">test1</div> <div id="test2" style=" 100px;height: 100px;background: yellow">test2</div> <input type="button" id="test3" value="确定"/> <p>测试P标签隐藏</p> <div class="test5" >测试隐藏class一样的DIV</div> <div class="test5" >测试隐藏class一样的DIV</div> </div> <script type="text/javascript"> var vm = new Vue({ el:'#rrapp', data:{ isdisplay:true, }, methods:{ testdisplay1:function(){ vm.isdisplay = !vm.isdisplay; }, testdisplay2:function(){ $("#test2").css("display", "none"); }, testdisplay3:function(){ $('#test3').hide(); }, testdisplay4:function(){ $("p").hide(); }, testdisplay5:function(){ $(".test5").hide(); } } }); </script> </body> </html>
hidden是html中的属性，规定元素是否可见
display是css中的样式,规定元素是否显示
visible 是css中的样式,规定元素是否可见
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
$("#id").hide()实际上是设置了css中的display为none,$("#id").show()实际上是设置了css中的display为block。这一点通过查看jQuery源码可知。
css里面的display会覆盖html中的hidden属性