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

在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>