1.v-if 条件渲染分组
元素当做不可见的包裹元素,可以包裹多个元素,显示时将不包含 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
2.v-if,v-else-if,v-else需紧跟连用。
v-else,v-else-if 也必须紧跟在带 v-if 或者 v-else-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>
注意:组件切换时,会复用已有元素,用条件切换时,不会清除已有的产生的值。如: 不会被替换掉——仅仅是替换了它的 placeholder。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
若要清除产生的值,设置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>
注意,<label> 元素仍然会被高效地复用,因为它们没有添加 key 属性。