- 뷰(Vue.js) 활용하여 끝말잇기 만들기

<head>
    <title>끝말잇기</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <div>{{word}}</div>
        <form v-on:submit="onSubmitForm">
            <input type="text" ref="answer" v-model="value">
            <button type="submit">입력!</button>
        </form>
        <div>{{result}}</div>
    </div>
    <script>
        const app = new Vue({
            el: '#root',
            data: {
                word: '예르미',
                result: '',
                value: ''
            },
            methods: {
                onSubmitForm(e) {
                    e.preventDefault();
                    if(this.word[this.word.length - 1] === this.value[0]) {
                        this.result = '딩동댕';
                        this.word = this.value;
                        this.value = '';
                    } else {
                        this.result = '땡';
                        this.value = '';
                    }
                    this.$ref.answer.focus();
                }
            }
        });
    </script>
</body>

- 결과물

{{word}}
{{result}}

- 참고자료

 

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

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

www.inflearn.com

티스토리툴바