vue笔记-条件渲染

条件渲染

　　1:指令v-if单独使用和结合v-else

//单独使用
<h1 v-if="ok">Yes</h1>
//组合使用
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

//切换多个元素 放在template标签里面
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else，v-else-if 指令不能单独使用,必须跟在v-if 或者 v-else-if之后

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

注意:1说明v-if指令是渲染标签,而不是单纯的对标签进行隐藏与显示
所以切换的时候他去重新渲染,然后发现以前渲染的元素(input和label)可以复用,那他
就只修改几个值

//通过添加key来管理可复用的元素,来阻止元素的复用,这里label没有
加,所以只是将Username改为Email

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

　　3:v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display,v-show 不支持 <template> 元素，也不支持 v-else.

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