必须紧挨着
<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 v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
Vue 会复用已有元素来快速渲染
<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=“”就行
<h1 v-show=true>Hello!</h1>
注意,v-show 不支持 <template> 元素,也不支持 v-else。
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
评论区