Vue入門教程03-條件語句的渲染

基本所有的編程語言都有條件判斷語句（如果你發現哪門編程語言沒有，請聯繫我領雞腿：594218572）；

1、v-if

v-if可以獨立使用，它根據use值(true 或 false )來決定是否插入 p 元素：

<p v-if="use">The use is true!</p>

2、v-else

v-else必須與v-if配合使用：

    <p v-if="use">The use is true!</p>
    <p v-else>The use is false!</p>

3、v-else-if

如果是多級條件判斷嵌套，使用v-else-if格式，如下：

<template>
  <div class="hello">
    <p v-if="msg === 'A'">The msg is A!</p>
    <p v-else-if="msg === 'B'">The msg is B!</p>
    <p v-else>The msg is other!</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'B'
      }
    }
  }
</script>

4、v-show

此外，還可以使用 v-show 指令來決定是否展示元素：

<p  v-show="use">The use is true,Show it!</p>

5、v-if與v-show的區別

v-if ：

先判斷後渲染，屬於惰性的（如果初始條件爲假，則渲染該元素快，直到條件第一次變爲真），而且在條件切換過程中，條件塊內的事件監聽器和子組件會適當地被銷燬和重建。

v-show:

先渲染後判斷，不管初始條件是什麼，元素總是會被渲染，再根據條件真假來簡單地基於 CSS 進行切換。

使用總結：

v-if 切換開銷比較高，而 v-show 初始渲染開銷比較高。所以，如果切換頻繁的場景，使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

END.