You can use v-if and v-else to display content based on assertions on your data. Similarly, v-show can be used to render the content, but hide it with css. v-if can also be used on an invisible wrapper <template>element.
v-if v-else:
It is good that when you use ‘v-if‘ you wrap the html into ‘<template>‘:
<template v-if="counter > 5"> <div>Show if the counter is greater than five</div> </template>
‘v-else‘: will be rendered if the closeset ‘v-if‘ doesn‘t render:
<template v-if="counter > 5"> <div>Show if the counter is greater than five</div> </template> <div v-else>Show the counter is smaller than five</div>
v-show:
<button @click="dec" v-show="counter > 0">-</button> <button @click="inc" v-show="counter < 5">+</button>
[Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)
原文：http://www.cnblogs.com/Answer1215/p/6347318.html