시나브로

[Vue.js 기초] 버튼 클릭 시, text 변경 본문

web/Vue.js

[Vue.js 기초] 버튼 클릭 시, text 변경

혬혬 2020. 8. 25. 10:19
728x90

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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> <!--vue-->
</head>
<body>
        
    <div id="app">
        <h1>{{msg}}</h1>
        <button v-on:click="bbq">hey</button>
    </div>


    <script>
        const app=new Vue({
            el:"#app",
            data(){
                return {
                    msg:"helloworld",
                    nextMsg:"happy?"                    
                }
            },

            methods:{ //함수정의
                bbq(){
                    this.msg=this.nextMsg //this접근유의
                }
            }

        })
    </script>

</body>
</html>

클릭시 값이 변경된다는 것은 onclick 이벤트를 추가하는 것과 동일하다. 

vue에서는 onclick 이벤트를 추가하기 위해 

첫번째, 이번트를 추가할 버튼에 v-on:click="함수명"을 명시해줘야된다. 

두번째, Vue 객체를 선언할 때, methods:{~~} 를 선언하여 함수를 선언한다.

단, 여기서 자신의 객체를 접근할 때는 꼭 this를 사용해야된다. 

728x90
저작자표시 비영리 동일조건

'web > Vue.js' 카테고리의 다른 글

[ vue.js ] 구현 : 리스트 중 하나를 선택하면 버튼을 활성화 시키자  (0) 2021.02.15
[ Vue.js ] 오류 : v-if, v-show에서 변경 값 인식 안됨  (0) 2021.02.15
[Vue.js 기초] hello world 출력하기  (0) 2020.08.25
'web/Vue.js' Related Articles more
Comments