vue 的条件渲染
2019-02-25 本文已影响0人
ER_PM
学习最好的方法就是把你知道的告诉别人！
条件渲染：通过条件来控制是否要渲染一块内容。
一、v-if
<h1 v-if="awesome">Vue is awesome!</h1>
还可以有else：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
它们必须相互紧跟，不然无法生效。
1、在 <template> 元素上使用 v-if 条件渲染分组
假如我们想通过v-if来切换多个元素，可以使用<template>元素来包裹，在它上面使用v-if：
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
2、v-else
我们可以使用v-if的v-else，例子如下：
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
注意：v-else 必须紧跟v-if后面，否则将不会被识别。
3、v-else-if
没错，就跟js的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>
4、用 key 管理可复用的元素
在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>
但是在有些场景下，我们不总是希望复用原来的元素，需要让它们彼此独立，我们只需要添加一个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>
现在，每次切换时，都会重新渲染，因为他们的key值不同，<label>会复用，因为它没有设置不同的key。
二、 v-show
v-show 也是根据条件来展示元素，跟v-if用法一样：
<h1 v-show="ok">Hello!</h1>
v-show始终会渲染并保留在DOM中的，它只是简单的对css属性的display切换。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
三、v-if 和 v-show之间的区别
- v-if:
- 只有条件为真时，元素才会真正渲染到DOM上，同时确保切换过程中，条件块内的事件、子组件都会被销毁和重建。
- 它也是惰性的，条件为假时，它什么也不做，
- v-show:
- v-show不管条件是什么它都会被渲染到DOM上，并且只是对CSS属性的display进行切换。
结论：使用v-if会有更大的切换开销，而v-show则初始会有更高的开销，如果频繁的对元素条件进行切换，建议使用v-show，否则使用v-if较好。
