v-if：
main.js:
var app = new Vue({
el: "#app",
data: {
role: 'admin'
}
});
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-if="role == 'admin'">管理员，你好！</div>
<div v-else="role == 'hr'">待查看简历。。。</div>
<div v-else>你没有权限查看信息！</div>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
v-if中包裹多个标签：
<div id="app">
<template v-if="value>10">
<p>hello</p>
<p>world</p>
</template>
</div>
var app = new Vue({
el: '#app',
data: {
value: 20,
}
});
v-show：
v-show 的用法与 v-if 基本一致，只不过 v-show 是改变元素的css 属性display。当v-show表达式的值为false时， 元素会隐藏，查看DOM 结构会看到元素上加载了内联样式 display:none;。
注：v-show不能在template上使用。
v-if与v-show的选择：
v-if和v-show具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为 false，则一开始元素／组件并不会渲染，只有当条件第一次变为真时才开始编译。
而v-show只是简单的css属性切换，无论条件真与否，都会被编译。相比之下，v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而 v-show 适用于频繁切换条件。
![vue项目：npm打包-S和-D区别：[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)