条件渲染
vue中的条件渲染分别为:v-if、v-show,两者都是用来控制元素在页面中的显示,在面试题中经常出现:v-if与v-show有什么区别。
v-if
语法:
v-if="表达式"
[v-else-if="表达式"]
[v-else="表达式"]
<div v-if="1===1">第一个div</div>
<div v-else-if="a===1">第二个div</div>
<div v-else>第三个div</div>
v-show
语法:
v-show="表达式"
<div v-show="1===1">我是div</div>
v-if与v-show的区别
-
v-if适用于切换频率较低的情况,v-show适用于切换频率较高的情况
-
v-if是动态的向DOM树内添加或删除DOM元素,v-show是通过设置DOM元素的display样式属性控制元素的显示(block),隐藏(none)
-
v-if如果初始条件为假则什么也不做,只有在条件第一次变为真时才开始编译;v-show不管初始条件是否为真都会被编译