WEB/vue.js

vue 기본문법

silverline79 2021. 11. 4. 20:50

<!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>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="root">

        <div v-if="liked">좋아요 눌렀음</div>

        <button v-else v-on:Click="onClickButton">Like</button>

    </div>

    <script>

        var app = new Vue({

            el : '#root',

            data : {

                liked : false,

            },

            methods:{

                onClickButton(){

                    this.liked = true;

                },

            },

        });

    </script>

</body>

</html>