Vue中对元素进行隐藏或显示,有两种常用方法,v-show和v-if,但这两种写法是有以下区别的
1、实现方法本质区别
- vue-show本质就是标签display设置为none,控制隐藏
- vue-if是动态的向DOM树内添加或者删除DOM元素
- v-show 只是简单的css 属性切换,无论条件真与否,都会被编译。相比之下, v-if 更适合
- 条件不经常改变的场景,因为它切换开销相对较大,而v-s how 适用于频繁切换条件。
2、编译的区别
- v-show其实就是在控制css
- v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
3、编译的条件
- v-show都会编译,初始值为false,只是将display设为none,但它也编译了
- v-if初始值为false,就不会编译了
4、性能
注意:v-show 不能在<template>上使用