Vue指令之`v-if`和`v-show`
Posted xiaowie
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue指令之`v-if`和`v-show`相关的知识，希望对你有一定的参考价值。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
<body> <div class="box"> <!-- v-if 等于true的时候 会把这个元素彻底移除掉--> <h1 v-if="flog">这里显示的是v-if绑定的数据</h1> <!-- v-show 等于true的时候，会把这个元素设置成display：none--> <h1 v-show="flog">这里显示的是v-show绑定的数据</h1> <input type="button" value="切换按钮" @click ="btnClick"> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm=new Vue( el:‘.box‘, data: flog:true , methods: btnClick:function() this.flog=!this.flog ); </script>
以上是关于Vue指令之`v-if`和`v-show`的主要内容，如果未能解决你的问题，请参考以下文章