- 뷰(Vue.js) 활용하여 구구단 만들기

<head>
    <title>구구단</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <div>{{first}}곱하기 {{second}}는?</div>
        <form v-on:submit="onSubmitForm">
            <input type="number" ref="answer" v-model="value">
            <button type="submit">입력</button>
        </form>
        <div id="result">{{result}}</div>
    </div>
    <script>
        const app = new Vue({
            el: '#root',
            data: {
                first: Math.ceil(Math.random() * 9),
                second: Math.ceil(Math.random() * 9),
                value: '',
                result: ''
            },
            methods: {
                onSubmitForm(e) {
                    e.preventDefault();
                    if(this.first * this.second === parseInt(this.value)) {
                        this.result = '정답';
                        this.first = Math.ceil(Math.random() * 9);
                        this.second = Math.ceil(Math.random() * 9);
                        this.value = '';
                    } else {
                        this.result = '땡';
                        this.value = '';
                    }
                    this.$ref.answer.focus();
                }
            }
        });
    </script>
</body>

- 결과물

{{first}}곱하기 {{second}}는?
{{result}}

- 참고자료

 

[무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의

간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런...

www.inflearn.com

티스토리툴바