Vue教程之条件渲染

条件渲染也可以说是条件判断，Vue在渲染程序的时候，会根据条件来进行渲染，只有条件为true的时候，才会被渲染到页面上，用法有：v-if，v-else，v-else-if，v-show。

v-if

v-if 判断为true的时候，才会被渲染到页面上。

<template>
  <div>
    <h1 v-if="isShow">hello world</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

我们有的时候需要对多个标签同时进行切换，一个一个的去写 v-if 显然是比较笨的办法，因此 Vue 为我们提供了一个 template 的标签，这个标签相当于一个占位符号吧，它不回在页面上进行渲染，但是可以添加 v-if 之类的标签。我们可以使用 template 标签对多个标签进行分组切换。

实例演示

<template>
  <div>
    <template v-if="isShow">
      <h1>hello world</h1>
      <h1>hello lanyulei</h1>
      <h1>hello beijing</h1>
    </template>
    <button @click="isShow = !isShow">切换</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

v-else

v-else 是在 v-if 或者 v-else-if 条件不成立的情况下，进行 v-else 里面的代码块的。

例如：

<template>
  <div>
    <h1 v-if="isShow">hello world</h1>
    <h1 v-else>人间不值得</h1>
    <button @click="isShow = !isShow">切换</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<template>
  <div>
    <h1 v-if="tag === 'world'">hello {{ tag }}</h1>
    <h1 v-else-if="tag === 'lanyulei'">hello {{ tag }}</h1>
    <h1 v-else>人间不值得</h1>
    <input type="text" v-model="tag">
  </div>
</template>

<script>
export default {
  data () {
    return {
      tag: ''
    }
  }
}
</script>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

Key

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

这么做除了使 Vue 变得非常快之外，还有其它一些好处。

例如，如果你允许用户在不同的登录方式之间切换：

<template>
  <div>
    <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>
    <br>
    <br>
    <button @click="loginType === '' ? loginType = 'username': loginType = ''">切换</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginType: ''
    }
  }
}
</script>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。

因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性 即可：

<template>
  <div>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email">
    </template>
    <br>
    <br>
    <button @click="loginType === '' ? loginType = 'username': loginType = ''">切换</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginType: ''
    }
  }
}
</script>

注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

v-show 跟 v-if 功能是类似的，但是又有本质上的区别。

v-show 在判断后，始终会渲染数据且使用 css 的 display 展示或者隐藏功能页面。

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

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

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

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

实例演示：

<template>
  <div>
    <h1 v-if="false">hello v-if</h1>
    <h1 v-show="false">hello v-show</h1>
  </div>
</template>

以上代码和结果可以看出，v-if 没有渲染数据，但是 v-show 渲染了数据，只是加了 display: none 的样式。