vue条件渲染

v-if

v-if 指令用于条件性的渲染一块内容. 该内容只有在表达式结果返回 true 值的时候被渲染

1	<div v-if="true">v-if表达式结果为真时显示</div>

`<template>` 元素

<template> 元素是 Vue 给我们提供的内置元素, 它不会显示在页面中
如果我们要对多个元素使用v-if指令, 可以使用 <template> 元素包裹所有需要作用的元素

<template v-if="true">
  <h3>title</h3>
  <p>...content</p>
</template>

v-else

可以使用 v-else 指令来表示 v-if 的’else’块
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素后面, 否则它将不会被识别

1 2	<div v-if="Math.random() > 0.5"></div> <div v-else></div>

v-else-if

v-else-if, 可以充当v-if的’else-if’块, 可以连续使用, 也必须紧跟在带v-if或者v-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="type==='D'">A</div>

key

Vue 会尽可能高效的渲染元素, 通常会复用已有元素而不是从头开始渲染, 这么做会使 Vue 变得非常快
但有时候, 我们并不希望使用此特性, Vue 为我们一种方式来表达不复用, 只需要添加一个具有唯一值的key属性即可

<template>
  <div class="hello">
    <template v-if="loginType">
      <label>Username</label>
      <input placeholder="Enter your username" key="username" />
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="pwd" />
    </template>
    <button @click="handle">toog</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    handle() {
      this.loginType = !this.loginType
    }
  },
  data() {
    return {
      loginType: true
    }
  }
}
</script>

v-show

另一个根据条件展示元素的选项是v-show指令, 用法与v-if大致一样:

v-show 不支持 <template> 元素, 也不支持 v-else

1	<h1 v-show="true">Ginger</h1>

v-if vs v-show

v-if 是真正的条件渲染, 他会在切换过程中适当的将事件监听器和子组件适当地被销毁和重建
v-if 是惰性的, 如果在初始渲染时条件为假, 元素便不会渲染, 只到条件第一次为真时, 才会开始渲染
v-show 不管初始条件是什么, 元素总是会被渲染, 并且只是基于 CSS 进行切换

v-if 与 v-show 一起使用

当v-if与v-for一起使用时, v-for具有比v-if更高的优先级

不推荐同时使用 v-if 和 v-else