티스토리 뷰

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>

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

[vue.js] fortawesome 사용하기  (0) 2021.12.21
vue Model 창 만들기  (0) 2021.11.29
ESLint 에러 화면에 표시되지 않게 작업하기  (0) 2021.11.29
vue.js 구구단  (0) 2021.11.04
댓글