1.v-if

使用场景

1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素2- 进行两个视图之间的切换 <div id="app"> <!-- 判断是否加载，如果为真，就加载，否则不加载--> <span v-if="flag"> 如果flag为true则显示,false不显示! </span> </div> <script> var vm = new Vue({ el:"#app", data:{ flag:true } }) </script> ---------------------------------------------------------- <div v-if="type === 'A'"> A </div> <!-- v-else-if紧跟在v-if或v-else-if之后 表示v-if条件不成立时执行--> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <!-- v-else紧跟在v-if或v-else-if之后--> <div v-else> Not A/B/C </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>

2.v-show

v-show 和 v-if的区别

v-show本质就是标签display设置为none，控制隐藏v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故频繁切换的情况下v-show性能更好一点。v-if是动态的向DOM树内添加或者删除DOM元素v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件根据它们底层的设计不一样有各自的使用场景 v-if具有较高的切换消耗,常常用在用户不常切换的模块 v-show具有较高的性能消耗,常常用在频繁切换的模块中

3.隐藏元素相关属性

visibility: hidden; 不脱离文档流的，位置还在，在文档树 display:none 脱离文档流，位置不在，在文档树 v-if 删除节点 v-show display:none