:::

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

  1. v-for="(變數, 第幾個) in 陣列" 迴圈,務必用 v-bind:key="唯一值" 綁定 key(可簡寫成 :key),避免每次改值都要重新渲染整個迴圈,太耗資源
    v-for="(新變數, 第幾個) in 陣列" :key="唯一值" 

     

  2. v-bind:屬性可綁定任何屬性,簡寫為 :屬性 :class
  3. <ul class="box" :class="{open: isOpen}"> 可簡寫成 <ul :class="['box', {open: isOpen}]">
  4. computed是一個函式,用來進行計算或資料重組,其結果會緩存,例如下例中的計算 BoxHeight 高度。
  5. 若需要計算的值需要傳入參數,則建議改用自訂函式,否則都建議用computed
  6. 只要是透過 computed 計算包裝過的 reactive 物件,都要用.value來取得 computed 中的資料
  7. filter() 方法會建立一個經指定之函式運算後,由原陣列中通過該函式檢驗之元素所構成的新陣列。如:listArr.filter((item) => item.show).length
  8. v-show 只是用CSS將元件隱藏(資源耗損較小)
  9. v-if 可真的隱藏動元素(資源耗損較高)
  10. 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>

完整範例


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1728

計數器

今天: 2687268726872687
昨天: 3755375537553755
總計: 4458526445852644585264458526445852644585264458526