v-if

用于条件性的渲染一块内容，该块内容只有在指令的表达式返回值为true的时候被渲染

<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>

vue会尽可能的高效的渲染元素，以上代码执行的时候，input中输入的内容将不会被替换，被替换的仅仅是placeholder

如果不想复用他们，想保持两个元素是独立的，只需要在元素上加上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和v-for一起使用

v-for将会比v-if有更高的优先级，v-if将会分别重复运行于每个v-for循环中

v-show

带有v-show的元素将会始终被渲染在DOM中，只是简单的切换了元素的css样式的dispaly

总结

1. v-if是真正的条件渲染，他会确保在切换过程中条件块内的时间和子组件被销毁和重建（组件被重建将会调用created）
2. v-show不论如何，都会被渲染在DOM中，当条件为真值时，将会修改条件的css样式
3. v-if有更高的切换开销，v-show有更高的初始渲染开销