v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="judge">
true
</div>
<div v-else>
false
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
judge:false
}
})
</script>
</body>
</html>说明：浏览器只渲染v-if为true的语句。
v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="seen">
you can see me!
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
seen: ture
}
})
</script>
</body>
</html>说明：当seen设为false是，v-show会给元素添加css代码：style=”display:none”;