diff options
| -rw-r--r-- | examples/framework-vue/src/components/Counter.vue | 29 |
1 files changed, 10 insertions, 19 deletions
diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue index 5ce5352b8..11f2bf1b5 100644 --- a/examples/framework-vue/src/components/Counter.vue +++ b/examples/framework-vue/src/components/Counter.vue @@ -1,31 +1,22 @@ +<script setup lang="ts"> +import { ref } from 'vue'; + +const count = ref(0); +const add = () => count.value++; +const subtract = () => count.value--; +</script> + <template> <div class="counter"> - <button @click="subtract()">-</button> + <button @click="subtract">-</button> <pre>{{ count }}</pre> - <button @click="add()">+</button> + <button @click="add">+</button> </div> <div class="counter-message"> <slot /> </div> </template> -<script lang="ts"> -import { ref } from 'vue'; -export default { - setup() { - const count = ref(0); - const add = () => (count.value = count.value + 1); - const subtract = () => (count.value = count.value - 1); - - return { - count, - add, - subtract, - }; - }, -}; -</script> - <style> .counter { display: grid; |