懶人包。
簡述
寫得越多你就越會發現都是這個 pattern:想要什麼就拿出來用
所以 Computed
也是一樣,直接看範例就懂了:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <template> <div class="home"> <input type="text" v-model="search" /> <p>Search term - {{ search }}</p> <ul> <li v-for="name of matchingNames" :key="name">{{ name }}</li> </ul> </div> </template>
<script> import { computed, reactive, ref } from 'vue'
export default { setup() { const names = ref(['mario', 'jojo', 'dio', 'luigi', 'koopa', 'peanu', 'ppb', 'joslon']) const search = ref('') const matchingNames = computed(() => names.value.filter((name) => name.includes(search.value)) )
return { names, search, matchingNames } } } </script>
|
這是一個搜尋的功能,matchingNames
就是根據關鍵字搜尋後的結果。