분류 전체보기32 [Vue.js] Vue.js에서 Resize 이벤트 처리하기 기존에는 HTML 요소에 일일이 CSS로 height를 줘서 높이를 처리하곤 했었는데 vue의 Resize이벤트를 사용하여 CSS 없이 간단하고 깔끔한 코드를 작성해보고자 한다. *Javascript기반의 Vue.js, Vue.js 기반의 quasar프레임워크를 사용하고 있다. Resize 이벤트 결론부터 말하자면 headerDiv라는 참조를 가진 엘리먼트의 높이에 30을 더한 값을 conditionHeight 데이터 속성에 할당하는 코드이다. 섹션에서 this.$refs.headerCard.$el을 사용하여 headerCard DOM의 엘리먼트 높이를 가져오고, 그 높이에 30을 더한 값을 conditionHeight에 할당한 뒤 이후에 그 높이를 conditionHeight에 반영시킨다. 또한 nex.. 2023. 10. 13. [Vue.js] HTML 요소의 클래스(class)를 동적으로 바인딩하기 css를 하다보면 하나의 HTML요소에 상황에 따라 다른 스타일을 적용해 주어야 할 때가 있다. 예를 들면 클릭 된 탭이 A냐 B냐에 따라 색상을 변경해 준다든가, 높이를 다르게 설정한다든가 하는 경우이다. :class 디렉티브 이런경우에는 :class 디렉티브를 사용해주면 된다. :class 디렉티브는 HTML요소의 클래스를 동적으로 바인딩하는데 사용된다. 삼항연산자를 이용하여 tabs가 template인 경우에는 aTemplateClass 클래스가, tabs가 template이 아닌 경우에는 bTemplateClass 클래스가 적용되게 해준다. 그 후에는 태그에 원하는 스타일을 지정해주면 된다. 사용자가 화면에서 탭을 클릭하면 tabs의 데이터가 변경됨에 따라 클래스를 동적으로 바인딩 할 수 있다. 2023. 10. 12. 이전 1 ··· 3 4 5 6 다음 728x90
