条件渲染
v-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
支持template
如果值未false,dom不会渲染
v-show
<h1 v-show="ok">Hello!</h1>
不支持template,仅仅是style属性display的值切换,因此不管值为真为假,都会渲染dom
key高效的元素复用
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
v-if在template中切换时,相同的元素,如果不定义key,则会被复用而只改变元素的值
比如:上边两个input如果不定义key,则只是改变了placeholder属性值而已,元素还是同一个。