Vue9 클래스와 스타일에 데이터 바인딩(class, style) 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. Intro html의 디자인을 담당하고 있는 class와 style 태그에 대한 데이터 바인딩을 다루는 방법입니다. 1. class 1-1. 클래스 처리 기본 방법 v-bind:class를 사용하면 기존 class 속성에 add가 됩니다. 'active': isActive를 true라고 주고, 'text-red':isRed을 false라고 주게 되면 'active' 속성이 class에 적용이 됩니다. 'text-red' 속성은 class에 적용되지 않습니다. Class Binding 1-2. 배열을 이용해서 클래스를 처리하는 방법 배열을 사용해서 커스텀하고자 하는 여러 속성.. 2021. 9. 18. v-bind (html 객체 속성에 바인딩) 개인 공부를 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. Intro html 객체의 속성에 바인딩을 하려면 v-bind:를 사용합니다. Example1. img 태그에 데이터 바인딩 Example2. button 태그에 데이터 바인딩 button 태그의 disabled 속성에 데이터 바인딩을 함으로써, 간단한 조건식으로 disabled 유무를 처리할 수 있습니다. Click 출처 Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전) 2021. 9. 18. 입력폼 데이터 바인딩 - 2(select, checkbox, radio) 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. Intro 입력폼 데이터 중에 select, checkbox, radio 속성에 대해 데이터 바인딩하는 방법을 알아보겠습니다. 1. select 태그 select box 속성 역시 데이터 바인딩을 위해 v-model을 사용합니다. 내부적으로 selectbox의 value 속성과 연결되어 바인딩됩니다. 서울 부산 제주 2. checkbox 태그 checkbox는 v-model을 쓰면 내부적으로 checkbox의 value 속성이 아니라 checked 속성하고 연결이 됩니다. value 속성하고 연결하고 싶다면 v-bind: 를 사용하면 됩니다. 2-1. 단일 checkbox 처리 {{checked}} 2-2. 여러 개의 checkb.. 2021. 9. 18. 입력폼 데이터 바인딩 - 1(input text, number, textarea) 개인 공부 목적으로 작성한 글입니다. 아래 출처를 참고하여 작성하였습니다. 1. input type v-model 속성 inputType Text, inputType Number, textarea 등은 value라는 속성을 쓸 수가 있는데, value라는 속성을 쓸 수 있는 객체에 대해서는 v-model이라는 걸 쓸 수 있습니다. 위 객체들에 script 태그 내 data에 있는 key값을 연결해주면 key값이 실제 객체의 value값에 매핑이 됩니다. 즉, input text, number, textarea는 v-model 속성을 이용해서 value에 데이터를 바인딩할 수 있습니다. 단, v-model 속성으로 들어오는 값은 text로 인식을 합니다. 그러므로 v-model 속성으로 들어오는 값을 숫자.. 2021. 9. 18. 이전 1 2 3 다음
