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元素總被渲染胀屿，更高初始渲染開銷
