vue3的computed計算屬性返回值註解

light丶發表於2024-06-19
Vue
//語法結構：computed<返回值的型別>()
列子
//定義資料
const cuont = ref(0)
type Item = {
  id: string
  name: string
  price: number
}
const list = ref<Item[]>(
[{ id: '1001', name: '男鞋', price: 888 },
 { id: '1002', name: '女鞋', price: 777 },
 { id: '1003', name: '中性鞋', price: 333 }]
)
//第一種寫法 計算屬性 自己預設
const dobuleCount = computed(() => {
  cuont.value * 2
})
dobuleCount
//第二種 自己定義型別返回值註解
const filterGood = computed<Item[]>(() => {
  return list.value.filter(item => item.price > 500)
})

</script>

<template>

  <ul>
    <li v-for="item in filterGood" :Key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<style scoped></style>

相關文章