Vue

Vue 로또 당첨번호 자동 생성하기

지오준 2023. 11. 9. 10:00
반응형

1. Vue.js 프로젝트 설정

먼저, Vue.js 프로젝트를 설정하고 시작하겠습니다. Vue CLI를 사용하여 프로젝트를 생성하거나, 단일 HTML 파일을 만들어 Vue를 직접 포함할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>로또 번호 생성기</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- Vue 앱이 여기에 들어갈 것입니다. -->
    </div>
    <script src="app.js"></script>
  </body>
</html>

 

2. Vue 인스턴스 생성

다음으로, Vue 앱을 초기화하고 기본 데이터를 설정합니다. 이 데이터는 로또 번호 생성과 관련된 것입니다.

const app = new Vue({
  el: '#app',
  data: {
    lottoNumbers: [], // 로또 번호를 저장할 배열
  },
});

 

3. 로또 번호 생성 로직 구현

이제 로또 번호를 생성하는 로직을 구현해야 합니다. 로또 번호는 1부터 45 사이의 6개의 고유한 숫자로 구성됩니다. 다음은 Vue 앱에서 이 로직을 구현하는 방법입니다.

methods: {
  generateLottoNumbers() {
    const numbers = Array.from({ length: 45 }, (_, index) => index + 1); // 1부터 45까지 숫자 배열 생성
    for (let i = 0; i < 6; i++) {
      const randomIndex = Math.floor(Math.random() * numbers.length); // 임의의 인덱스 선택
      this.lottoNumbers.push(numbers.splice(randomIndex, 1)[0]); // 선택한 번호를 결과 배열에 추가하고 배열에서 제거
    }
    this.lottoNumbers.sort((a, b) => a - b); // 결과 배열을 오름차순 정렬
  },
},

 

이 메서드는 lottoNumbers 배열에 6개의 고유한 로또 번호를 생성하고, 그 번호들을 오름차순으로 정렬합니다.

 

4. HTML 템플릿 작성

HTML 템플릿을 작성하여 사용자에게 로또 번호 생성 버튼을 제공합니다.

<div id="app">
  <h1>로또 번호 생성기</h1>
  <button @click="generateLottoNumbers">로또 번호 생성</button>
  <div v-if="lottoNumbers.length > 0">
    <h2>당첨 번호:</h2>
    <ul>
      <li v-for="number in lottoNumbers" :key="number">{{ number }}</li>
    </ul>
  </div>
</div>

 

5. 완성된 앱

이제 Vue 앱이 완성되었습니다. 사용자가 "로또 번호 생성" 버튼을 클릭하면 무작위로 생성된 6개의 로또 번호가 표시됩니다. 당첨 번호가 나올 때마다 버튼을 클릭하여 새로운 번호를 생성할 수 있습니다.

이것이 Vue.js를 사용한 간단한 로또 번호 생성기의 기본적인 블로그 형식으로 알려준 것입니다. 필요에 따라 스타일링과 추가 기능을 더할 수 있습니다.

반응형