:::
2-2 v-on 事件綁定及readonly 唯讀
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).lengthv-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>
完整範例
