HTML을 제어하는 Vue.js
Like it 버튼을 누르면 버튼이 사라지고 liked로 변하는 페이지를 만들어보자
관심있게 볼 부분은 el, data, methods 이다.
제어할 부분이 id가 root인 태그를 적어주고 기본 data에 임의로 liked를 만들고 기본 값을 false로 주었다. 따라서 이 liked는 그냥 두어서는 표시되지 않는다. 그리고 methods에 onClickButton 함수를 만들었는데 liked를 true로 만들어주는 역할을 한다.
html로 돌아가자 Like it 버튼에 onClickButton 을 넣어주었고 v-on:click을 사용하여 클릭하면 실행되도록 하였다.
버튼을 클릭하면 false였던 liked가 true가 되면서 버튼은 liked 글자로 바뀐다
Last updated