vue使用v-if...v-else...详解

自从学习了vue之后，就基本把jquary舍弃了，因为jquary主要是处理DOM比较出色，不过vue连DOM都不用处理，直接处理数据就行了，如果需要判断元素，使用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>

这里要注意的是，v-if是惰性的，没满足条件就不会渲染，不同于v-show。