v-if
v-if 实现按条件渲染目标
yes
#在元素上使用v-if
当分组渲染时,将元素作为不可见的包裹元素,并在上面使用
v-if
,实现分组条件渲染。
#v-else
v-else
必须在v-if
或者v-else-if
后。
yes
no
#v-else
2.1.0新增
v-else-if
必须在v-if
或者v-else-if
后,可连用。
A
B
not A/B
#用key管理可复用的元素
Vue的渲染机制:复用已有元素,提高算然速度。
下面例子:
当切换显示时,和
都不会销毁,仅仅是改变了不同的html属性(
的text和
的placeholder),因此
的内容不会改变。
当两个元素应当完全独立时,只要赋予不同的key
属性,就可以了。
v-show
和v-if
类似,v-show
可以实现条件渲染。
不过区别是:v-show
不管条件如何,都会将元素渲染,只是简单切换css属性display
。
注意:v-show不支持元素和
v-else
.
v-show
vs v-if
v-if
与 v-for
同时使用
不推荐同时使用 v-if
与 v-for
。
当 v-if
与 v-for
同时使用时,v-for
的优先级高于 v-if
。