条件渲染
1、v-if指令用于条件性的渲染一块内容
<div v-if=true>hello Vue</div>
2、也可以使用v-else添加一个else块
<div v-if=false>hello Vue</div>
<div v-else>hello world</div>
3、在<template>元素上使用v-if条件渲染分组
当需要切换多个元素的时候可以把v-if添加到template内，因为<template>元素是一个不可见元素，渲染的结果将不包含<template>元素
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
4、v-if-else顾名思义就是充当v-if的else if块，可连续使用
<div v-if="score==100">
满分
</div>
<div v-else-if="score>=80 && score<100">
良好
</div>
<div v-else-if="score>=70 && score<=60">
及格
</div>
<div v-else-if="score<60">
不及格
</div>
<div v-else>
请输入正确的成绩
</div>
5、v-show同样是根据条件展示元素
<div v-show="ok">hello</div>
与v-if不同的是v-show的元素会始终被渲染并保留在DOM中。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。