[油猴脚本开发指南]条件渲染
# v-ifv-if相当于js的ifelse语句
根据变量的真假来进行渲染
```js
<h1 v-if="awesome">Vue is awesome!</h1>
```
同理，我们也可以添加v-else，等同于else
```js
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
```
# template
在html中temaplate是一个不可见的元素
而在vue同理，template相当于一个虚拟的元素，我们可以用它来包裹元素
然后进行一些逻辑的判断
```js
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
```
# v-else
必须跟v-if或v-else-if连用
```js
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
```
# v-else-if
类似于if else if else if
我们可以连续使用
```js
<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>
```
# v-show
v-sow与v-if同理
唯一的区别是v-if为假的时候，会直接销毁元素
而v-show相当于使用css的display:none来临时隐藏元素
但是元素依然存在于页面中
注意
v-show不支持template元素，也不支持v-else
# 注意
v-if与v-for不建议连用
v-if在低配置机器上渲染成本较高
但是v-if可以用来控制子组件的销毁，再次为真的时候可以直接继续进行初始化流程
对普通开发的时候更友好
如果使用v-show的话，我们需要对变量的更改做更多的监听，逻辑更为复杂
v-slot{:4_110:}
页:
[1]