Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-02-03 22:29:08 -05:00
Code Issues Activity

Refactor Vue example to use <script setup> (#9379)

Browse source
This commit is contained in:
Shinya Fujino 2023-12-11 17:14:28 +09:00 • committed by GitHub
parent bebf5cf22d
commit a0dc4a4357
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
examples/framework-vue/src/components/Counter.vue
View file

@ -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;