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:
parent
bebf5cf22d
commit
a0dc4a4357
1 changed files with 10 additions and 19 deletions
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue