记录一下各种隐藏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="width: 100px;height: 100px;background: red">test1</div> <div id="test2" style="width: 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>