0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -05:00

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

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

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> <template>
<div class="counter"> <div class="counter">
<button @click="subtract()">-</button> <button @click="subtract">-</button>
<pre>{{ count }}</pre> <pre>{{ count }}</pre>
<button @click="add()">+</button> <button @click="add">+</button>
</div> </div>
<div class="counter-message"> <div class="counter-message">
<slot /> <slot />
</div> </div>
</template> </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> <style>
.counter { .counter {
display: grid; display: grid;