간단한 연습
<script setup>
import {ref, reactive} from 'vue';
const state = reactive({
count: 0,
name: ''
})
const increment = () => {
state.count++;
}
const discrement = () => {
state.count--;
}
const reset = () => {
state.count=0
state.name=''
}
</script>
<template>
<body>
<div>
<h2>안녕하세요 {{state.name}}님 !</h2>
<input v-model="state.name" placeholder="이름 입력해주세요" >
<h3>현재 숫자 : {{state.count}}</h3>
<button @click="increment">+1 증가</button>
<button @click="discrement">-1 감소</button>
<button @click="reset">리셋</button>
</div>
</body>
</template>
'웹 개발 > Vue' 카테고리의 다른 글
| [Vite] 설정, 프로젝트 생성 (0) | 2025.05.19 |
|---|---|
| [Vue3] 데이터 등록 예제 (0) | 2025.05.15 |
| [Vue3] ref(), reactive() (0) | 2025.05.15 |
| [Vue3] npm run dev 실행되지 않을 때 (0) | 2025.05.15 |
| [Vue3] v- 지시자 directive (0) | 2025.05.15 |