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 较好。