고지은고

어제의 포스팅에 이은 Vue.js의 class, 그리고 반복문 v-for에 대해 정리하겠다 Vue 프레임워크를 이용해서 class를 동적으로 쉽게 만드는 방법이 존재한다. 위의 코드는 버튼 7이라는 이름의 버튼을 갖고 있으며, 따로 부트스트랩 요소를 추가해주지 않는 상태이다. 바로 옆의 input창의 value값을 모델로 지정해놨으며, 만약 무언가를 작성하고 옆의 add 클릭 이벤트가 등록되어있는 추가 버튼을 클릭하면 부트스트랩 요소가 적용된다 (밑의 예시에서 보여주겠지만, btn과 btn-primary라는 부트스트랩 요소를 이용했다) 여기서 우리가 데이터로 받는 건 arr과 inputClass이며, 디폴트 값으로 arr의 경우 입력되는 대로 값을 하나씩 받을 예정이라 빈 배열 [ ]로 지정해놨다. 그리..

저번 포스팅에 이어서 마저 Vue 시작하기 포스팅을 해보겠다! 자바스크립트에서 input 요소의 value를 vue에서 v-model을 통해 지정할 수 있다 위의 코드에선 input의 value를 msg라는 모델명으로 사용했다 그리고 input에서 작성한 내용(msg)이 바로 밑의 p요소의 innerText로 그대로 나오게끔 하기 위해 {{msg}}와 두 가지 방법을 사용했다. input 창에 v-model!!!이라고 작성해보니 기존의 {{}}와 v-text 두 가지 방법 모두 제대로 작동한다 위의 예시와 마찬가지로 v-model을 이용하여 value값을 제어한다 checkbox의 경우, 체크가 되어있으면 true 안되어있으면 false를 반환하는데 ture, false가 아닌 다른 값을 지정해줄 수 있..