Vue学习笔记----条件渲染

条件渲染

 

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

支持template
如果值未false，dom不会渲染

v-show

<h1 v-show="ok">Hello!</h1>

不支持template，仅仅是style属性display的值切换，因此不管值为真为假，都会渲染dom

 

key高效的元素复用

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-if在template中切换时，相同的元素，如果不定义key，则会被复用而只改变元素的值
比如：上边两个input如果不定义key，则只是改变了placeholder属性值而已，元素还是同一个。