vue-4-Class 与 Style 绑定

v-if

<h1 v-if="ok">Yes</h1>
切换多个元素://最终的渲染结果不会包含 <template> 元素
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph </p>
<p>Paragraph </p>
</template>
//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>Not A/B</div>

在v-if,v-else下的元素,vue会尽可能复用同一元素,切换属性内容而不切换元素本身;添加一个具有唯一值的 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 属性

v-show

<h1 v-show="ok">Hello!</h1>
v-show 不支持 <template>,元素总是会被渲染,并且只是简单地基于 CSS 进行切换
如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
上一篇:并发库应用之六 & 有条件阻塞Condition应用


下一篇:竞态条件 race condition data race