v-if 和 v-show 的区别
v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换
也就是说,在使用v-if时,若值为false,那么页面将不会有这个
使用场景
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
另外
1.v-if 指令可以应用于template包装元素上,而v-show不支持template
2.将v-show应用在组件上时,因为指令的优先级 v-else 会出现问题,解决办法就是用另一个 v-show 替换 v-else
// 错误
这可能也是一个组件
// 正确做法
这可能也是一个组件
解决
方法一:v-cloak
v-cloak指令和
eg:
//
不会显示,直到编译结束。
[v-cloak]{
display:none;
}
{ { message }}
方法二:v-text
而使用v-text的好处就是永远更好的性能,更重要的是可以避免FOUC (Flash of Uncompiled Content) ,也就是上面与遇到的问题。
eg:
{ {message}}
补充:
<