티스토리 뷰

WEB/vue.js

vue.js 구구단

silverline79 2021. 11. 4. 21:45

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <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" v-model="value" ref="answer"/>

            <button type="submit" >입력</button>

            <div id="result">{{result}}</div>

        </form>

    </div>

    <script>

        var 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(); //폼의 기본적인 새로고침을 막기위함

                    console.log(this)

                    console.log(this.first , this.second , this.value);

                    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 = '';

                        this.$refs.answer.focus();

                    } else{

                        this.result ="땡";

                        this.value = ''; // 틀렸을때 다시

                        this.$refs.answer.focus();

                    }

                }

            },

        });

    </script>

</body>

</html>

'WEB > vue.js' 카테고리의 다른 글

[vue.js] fortawesome 사용하기  (0) 2021.12.21
vue Model 창 만들기  (0) 2021.11.29
ESLint 에러 화면에 표시되지 않게 작업하기  (0) 2021.11.29
vue 기본문법  (0) 2021.11.04
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함