Vue-Composition API(Computed)

懶人包。

簡述

寫得越多你就越會發現都是這個 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>
// 把 computed 拿出來用
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 就是根據關鍵字搜尋後的結果。

Vue-Composition API(watch & watchEffect) JavaScript-Immutable.JS
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×