v-for 迴圈、v-bind 屬性綁定、v-show及v-if、computed

:::

Vue.js 3.0 筆記

2-3 v-for 迴圈、v-bind 屬性綁定、v-show及v-if、computed

v-for="(變數, 第幾個) in 陣列" 迴圈，務必用 v-bind:key="唯一值" 綁定 key（可簡寫成 :key），避免每次改值都要重新渲染整個迴圈，太耗資源
```
v-for="(新變數, 第幾個) in 陣列" :key="唯一值"
```
v-bind:屬性可綁定任何屬性，簡寫為 :屬性 如 :class
<ul class="box" :class="{open: isOpen}"> 可簡寫成 <ul :class="['box', {open: isOpen}]">
computed是一個函式，用來進行計算或資料重組，其結果會緩存，例如下例中的計算 BoxHeight 高度。
若需要計算的值需要傳入參數，則建議改用自訂函式，否則都建議用computed。
只要是透過 computed 計算包裝過的 reactive 物件，都要用.value來取得 computed 中的資料
filter() 方法會建立一個經指定之函式運算後，由原陣列中通過該函式檢驗之元素所構成的新陣列。如：listArr.filter((item) => item.show).length
v-show 只是用CSS將元件隱藏（資源耗損較小）
v-if 可真的隱藏動元素（資源耗損較高）
v-if 跟 v-for 不能同時使用，v-if 的執行順序比 v-for 高。

<script>
  const { ref, reactive, computed } = Vue;
  const App = {
    setup() {
      const isOpen = ref(true);
      const listArr = reactive([
        { name: "項目A", show: true, css: "red" },
        { name: "項目B", show: false, css: "red" },
        { name: "項目C", show: true, css: "blue" },
        { name: "項目D", show: true, css: "red" },
        { name: "項目E", show: false, css: "red" },
        { name: "項目F", show: true, css: "blue" },
        { name: "項目G", show: true, css: "blue" },
        { name: "項目H", show: true, css: "blue" },
        { name: "項目I", show: true, css: "red" },
      ]);

      const ItemArr = computed(() => {
        return listArr.filter((item) => item.show === true);
      });

      const BoxHeight = computed(() => {
        return isOpen.value ? `${ItemArr.value.length * 40}px` : "0px";
      });

      const HandListShow = () => {
        isOpen.value = !isOpen.value;
      };
      return {
        listArr,
        HandListShow,
        isOpen,
        BoxHeight,
      };
    },
  };
  Vue.createApp(App).mount("#app");
</script>