diff options
Diffstat (limited to 'examples/framework-vue/src/components')
| -rw-r--r-- | examples/framework-vue/src/components/Counter.vue | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue new file mode 100644 index 000000000..11f2bf1b5 --- /dev/null +++ b/examples/framework-vue/src/components/Counter.vue @@ -0,0 +1,32 @@ +<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> + <pre>{{ count }}</pre> + <button @click="add">+</button> + </div> + <div class="counter-message"> + <slot /> + </div> +</template> + +<style> +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; +} + +.counter-message { + text-align: center; +} +</style> |