VUE复习笔记7（条件渲染）

条件渲染

v-if

Yes

其中如果 ok返回的是 true，则显示 h1标签，否则不产生节点。

我们也可以通过 v-else 添加一个 else语句块

Yes
No

当然你也可以这样表示

Yes
No

在 template 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须把它添加到一个元素上，如果我们想切换多个元素呢，除了将 v-if 添加到我们所需要控制的多个元素上之外，我们还可以将这些元素 用一个标签 包裹起来，然后在根元素上使用v-if

  
Title
  
Paragraph 1
  
Paragraph 2

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

  Now you see me


  Now you don't

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

v-else-if 是跟在v-if 或者 v-else-if 后面的，可以连续使用。

  A


  B


  C


  Not A/B/C

使用key管理可以复用的元素

vue会尽可能高效的渲染元素，通常都是会复用已有的元素，而不是从头开始渲染，这样除了让 vue 变得非常快之外，还有别的作用。例如，如果你允许用户在不同的登录方式之间切换：

这样写就可以快速的渲染切换，但是当用户输入了信息切换后，所输入的信息还是存在的，这是因为他使用了相同 input 元素。vue会自动检查是否是相同的元素，并判断是否进行重新渲染，这里就没有，只是替换了 placeholder。

通常情况下，我们切换的时候，还是希望将输入框中的内容清除。
vue 提供了一个方式来表达 这两个元素是独立的，不需要进行复用，只需要在元素上添加key属性即可，然后加上不同的值。

现在每次切换的时候，输入框就会重新渲染了。
注意， 元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

用法与 v-if 差不多，也是用于判断元素的展示。

Hello!

当 ok 返回 true 时显示，false时不显示。

v-if vs v-show

v-if:返回false时，元素节点都是删除的，返回true，重新渲染节点。
v-show:返回false时，元素节点为 display:none,true时 display:block

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if较好

注意，v-show 不支持