# v-if、v-show

## ==v-if與v-show差異==

* v-if 在渲染時比較會耗效能，適用於在網頁一開始就出現時或不常切換使用。
* v-show 一開始就會是 ==display: none;==狀態，所以會大量消耗效能 所以不太適用於:table 這種情況。

 <div id="app">
      <h1 id="vue-if" v-if="isShow">{{Text}}</h1>
      <h1 id="vue-show" v-show="isShow">{{Text}}</h1>
      <button @click="handDomShow">Hand Dom Show</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const { ref } = Vue;
      const App = {
        setup() {
          const isShow = ref(false);
          const Text = ref("Hello Vue!");

          const handDomShow = () => {
            isShow.value = !isShow.value;
          };

          return {
            Text,
            isShow,
            handDomShow,
          };
        },
      };
      Vue.createApp(App).mount("#app");
    </script>