VueJS条件语句：v-if、v-else、v-else-if

VueJS条件语句：v-if、v-else、v-else-if

HTML:if-else

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

HTML:if-else if-else

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>v-show
我们也可以使用 v-show 指令来根据条件展示元素：

<h1 v-show="ok">Hello!</h1>纸上得来终觉浅，绝知此事要躬行。