Vue知识点:v-if和v-show

Vue知识点:v-if和v-show,第1张

v-if和v-show都是条件渲染指令,用于控制元素或模板的渲染,也就是控制DOM元素的显示和隐藏。

v-if

v-if是“真正”的条件渲染。它控制的是DOM节点

当表达式的值为true或false时,生成或移除一个元素。类似于JavaScript中的if条件判断。

它是惰性的,若在初始渲染时条件为false,什么也不做直到条件值为true时,才会开始渲染条件块。

除了v-if不有v-else-if和v-else。


v-if中的isshow其值为true,相当于v-if="true",页面显示内容为“显示”

v-show

它控制的是DOM节点的display属性。不管初始条件是什么,元素总会被渲染,且只是简单基于css进行切换。

当v-show值为true时,DOM元素的display值为block,反之,display值为none。用户看不到元素,但其DOM元素还存在,只是隐藏了而已。

注意:v-show 不支持