<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-if="show">要显示出来</p>
<p v-if="hide">不要显示</p>
<p v-if='height>1.55'>小明的身高是{{height}}m</p>
<p v-if='height1>1.55'>小王的身高是{{height1}}m</p>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data () {
return {
show:true,
hide:false,
height:'1.68',
height1:'1.50',
}
}
})
</script>
</body>
</html>v-if的效果图
v-show的效果图
v-if和v-show显示出来的效果是一样的，但二者也是有区别的
v-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件，v-show则只是简单地基于CSS切换。
v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用v-show较好，如果在运行时条件不大可能改变则使用v-if较好。
v-else必须和v-if或者v-else-if配合使用，不能单独使用
运行效果图
