v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。
v-if示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue2.2.js"></script> </head> <body> <!--与v-else一样，v-else-if 必须要在v-if或者-else-if之后--> <div id="app"> <h1>hello,VueJs</h1> <h1 v-if="yes">Yes!</h1> <h1 v-if="no">No!</h1> <h1 v-if="age>=25">Age1:{{age}}</h1> <h1 v-else-if="age<25">Age2:{{age}}</h1> <h1 v-if="name.indexOf('ab')>=0">name1:{{name}}</h1> <h1 v-else>Name2:{{name}}</h1> </div> <script> var vm = new Vue({ el: "#app", data: { yes: true, no: false, age: 18, name: "Mr.lan" } }) </script> </body> </html>
v-show示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue2.2.js"></script> </head> <body> <!--注意v-show不支持<template>语法 注意v-show的元素会始终渲染并保持在DOM中，v-show是简单的切换元素的css属性display--> <div id="app"> <p v-show="ok">v-show演示1</p> <p v-show="!ok">v-show演示2</p> </div> <script> var vm = new Vue({ el:"#app", data:{ ok:false } }) </script> </body> </html>