vue条件渲染

Posted 2020-09-02 腾信@迪克猪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue条件渲染相关的知识，希望对你有一定的参考价值。

v-if

在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在 Vue.js ，我们使用 v-if 指令实现同样的功能：

<h1 v-if="ok">Yes</h1>

也可以用 v-else 添加一个 “else” 块：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

<template>中的v-if条件组

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else

可以用 v-else 指令给 v-if 添加一个 “else” 块：

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

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

v-else-if

v-else-if，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

<div v-if="type === ‘A‘">
  A
</div>
<div v-else-if="type === ‘B‘">
  B
</div>
<div v-else-if="type === ‘C‘">
  C
</div>
<div v-else>
  Not A/B/C
</div>

与 v-else 相似,，v-else-if 必须跟在 v-if 或者 v-else-if之后。

使用key控制元素的可重用

Vue 尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 更快之外还可以得到一些好处。如下例，当允许用户在不同的登录方式之间切换:

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

在代码中切换 loginType 不会删除用户已经输入的内容，两个模版由于使用了相同的元素，<input> 会被复用，仅仅是替换了他们的 placeholder。

自己动手试一试,输入一些文本，然后点击「Toggle login type」进行切换

<div id="no-key-example" class="demo">
  <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>
  </div>
  <button @click="toggleLoginType">Toggle login type</button>
</div>
<script>
new Vue({
  el: ‘#no-key-example‘,
  data: {
    loginType: ‘username‘
  },
  methods: {
    toggleLoginType: function () {
      return this.loginType = this.loginType === ‘username‘ ? ‘email‘ : ‘username‘
    }
  }
})
</script>