v-if与v-show

 参考文档简介 | Vue.js

用 v-show 的时候发现有些元素不能显示，然后去找了文档，发现在官方文档中就有说明——v-how 不支持在<template> 元素上使用。而当时我就是写了<template v-show="show === true">作了一个条件判断是否显示<template> 元素。接着就做了一些笔记。

v-if：指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。且必须依附于某个元素可以在<template> 元素上使用。可以使用 v-else / v-else-if 为 v-if 创建另一个条件。前者是创建“else区块”，后者是创建“else if区块”。一个 v-else 必须跟在一个 v-if 或 v-else-if 后面，否则将不会被识别。v-else-if 同理。v-else 和 v-else-if 不能单独出现。

// v-else / v-else-if 不可以单独出现
<div v-if="type === 'A'"> // type = A 时，显示 A
  A
</div>
<div v-else-if="type === 'B'"> // type = B 时，显示 B
  B
</div>
<div v-else-if="type === 'C'"> // type = C 时，显示 C
  C
</div>
<div v-else> // type = D（或者其他任何不为 'A'/'B'/'C' 的值） 时，显示 Not A/B/C
  Not A/B/C
</div>

// v-if 可以单独出现
// template 可以用 v-if
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show：用来按条件显示一个元素的指令.不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 dispaly 的 CSS 属性，不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

<h1 v-show="ok">Hello!</h1> // 当 ok 为 true 时，页面会显示 h1 格式的 Hello！

两者的区别：官方文档其实有写，我个人的理解就是，一个是“if”，一个是“show”。if 做判断，满足条件就继续，否则不渲染、不“执行”；show为显示，不管条件是否满足，在一开始就会加载好，当show为“真”的时候就显示出来让你看见。

如果有不对之处，还请指出