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=)