v-if

在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的。示例代码如下：

    
今天去公园玩！


    
今天去看电影！


    
今天哪儿也不去！

在<template>上使用v-if

有时候我们想要在一个条件中加载多个html元素，那么我们可以通过template元素上实现。示例代码如下：

用 key 管理可复用的元素

另外，在模板中，Vue会尽量重用已有的元素，而不是重新渲染，这样可以变得更加高效。如果你允许用户在不同的登录方式之间切换：

  

  

  

    切换登录类型

  

接下来我们查看下效果图

这个里面会有一个问题，就是如果我在username的输入框中输入完信息，切换到邮箱中，之前的信息还是保留下来，这样肯定不符合需求的，如果我们想要让html元素每次切换的时候都重新渲染一遍，可以在需要重新渲染的元素上加上唯一的key属性，其中key属性推荐使用整形，字符串类型。示例代码如下

  

  

  

    切换登录类型

  

我们可以看到用户名原来输入的123切换到邮箱方式时，输入框中的123不见了
注意，元素仍然会被高效地复用，因为它们没有添加key属性。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

Hello!

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

注意，v-show 不支持