Vue2：條件語句

Vue.js 條件與循環

條件判斷

v-if

條件判斷使用 v-if 指令：

<div id="app">
    <p v-if="seen">現在你看到我了</p>
    <template v-if="ok">
      <h1>菜鳥教程</h1>
      <p>學的不僅是技術，更是夢想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

v-else

可以用 v-else 指令給 v-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>

v-else-if

v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊。可以鏈式的多次使用：

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