条件渲染

1.v-if

<div v-if="result == 1">1</div>
<div v-else-if="result == 2">2</div>
<div v-else>Others</div>

<!-- template为包装元素,使得v-if指令可应用于多个元素,且最终渲染结果不包含template -->
<template v-if="result == 1">
    <div>1</div>
    <div>2</div>
</template>

<template v-if="result == 1">
    <!-- label没加key会被复用,仅替换文本 -->
    <label>Name</label>
    <!-- input添加了key,会在每次resule值切换时重新渲染 -->
    <input key="name-input" />
</template>
<template v-if="result == 2">
    <label>Email</label>
    <input key="email-input" />
</template>

为提高效率Vue会尽可能的复用已有元素，而非重新渲染，可以通过添加key属性告诉Vue不要复用该元素

2.v-show

元素始终保留在DOM中，仅切换元素CSS属性display，不支持<template>语法和v-else

v-if元素惰性渲染(直到条件为true，才渲染)，更高切换开销
v-show元素总被渲染，更高初始渲染开销