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 글자로 바뀐다

index.html

<div id="root">
  <h1>누르면 변하는 좋아요 버튼 만들기</h1>
  <p v-if="liked">liked 🥪</p>
  <button  v-else v-on:click="onClickButton">Like it!</button>
</div>
<script>
const app = new Vue({
  el: "#root",
  data:{
    liked: false
  },
  methods:{
    onClickButton(){
      this.liked = true;
    }
  },
});
</script>