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