vue.js怎样使用v-if v-else

在vue.js中，如何根据条件来判断是否要显示和隐藏模版或者组件？

vue.js有对象的该属性v-if…v-else，该属性就好像我们学习JS的时候if…else…判断语句是一样的，不同的是v-if…v-else…是写在模版或者组件中动态判断改变显示的元素。

例如：

<div id="example-if">
<div class="div-A" v-if='Math.random()>0.5'>
显示代码块A
</div>

<div class="div-B" v-else>
显示代码块B
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#example-if',
data: {
}
});
</script>

不断刷新，你会发现随着随机数的变化，两个代码块也交替显示隐藏。

多个条件判断也是如此：

<div id="example-if">
<div class="div-A" v-if='message==="A"'>
显示代码块A
</div>

<div class="div-B" v-else-if='message==="B"'>
显示代码块B
</div>
<div class="div-C" v-else>
显示代码块C
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#example-if',
data: {
message:'C'
}
});
</script>

这里要注意，这个显示和隐藏不是css属性的display：none控制的，v-if…v-else…是满足判断条件就渲染，反则就不会继续渲染。这里要和v-show区分开来，v-show是css控制的，只是隐藏了，其实是背后渲染了的。