조건에 따라 class 토글하기변수의 값을 class로 지정하기......id는 v-bind:id나 :id를 사용하면 된다.  예시 1) 변수 값에 따라 클래스 지정하기 ......예시 2) foreach 문에서 특정 값에 따라 클래스 지정하기

Vue로 구현하다 보면 렌더링이 완료되기 전에 {{ }}가 보이거나, v-if나 v-show로 처리한 요소들이 보이는 경우가 있다.사내에서 확인할 때에는 크게 거슬릴 정도는 아니었는데, 속도가 좀 느린 환경에서 실행할 때에는 꽤 오래 보일 때가 있어서 해결 방법을 알아 보았다. v-cloak을 지정하기 전 v-cloak'v-cloak'은 Vue 처리가 완료되면 자동으로 삭제되는 디렉티브이다.이를 활용하여, Vue.js에서 해당 요소가 렌더링되기 전까지 요소를 브라우저에서 감출 수 있다. 1. 스타일 설정/* [ ] : 속성 선택자 *//* 'v-cloak' 속성을 가진 요소에 해당 스타일을 적용함 */[v-cloak] { /* 해당 요소를 숨김 */ display: none;} 2. 렌더링이 ..

v-showv-show를 사용하면 조건의 true/false와 관계 없이 해당 요소가 렌더링되지만,false일 경우 'display:none'으로 설정되어 숨김 처리되고, 다시 true로 변경된다면 'display:none'이 해제된다. v-ifv-if를 사용하면 조건이 true인 경우에만 해당 요소가 렌더링된다.만약 조건식의 결과가 false였다가 다시 true로 변경되면 해당 요소를 재렌더링하는 방식이다.홈페이지 →인스타그램 →  따라서, 조건식의 결과가 변경될 가능성이 있는 경우에는 v-if보다는 v-show를 사용하는 것이 좋다.

Vue.js는 프로젝트의 특정 영역에만 적용해서 사용할 수도 있다는 장점이 있다.이번에 프론트 리뉴얼 작업을 하게 되었는데, 이번 기회에 Vue.js를 연습해보면 좋을 것 같아서 기존 프로젝트에 Vue.js 3를 추가했다.  {{ var1 }}

기존 코드 {{ brandInfo.master_category_desc }} - {{ brandInfo.category_desc }} DB에서 데이터를 불러와서 vue.js로 출력하려고 할 때 '&'가 '&'로 출력되는 문제가 있었다.'&'는 '&' 문자의 HTML 엔티티 코드 (특수 문자를 표현하는 문자열)인데, 특정 상황에서 '&' 문자가 엔티티 코드로 변환되어 나타나면서 발생하는 문제라고 한다.  해결 'v-html'은 문자열 안에 포함된 HTML 엔티티 코드를 실제 HTML 요소나 문자로 해석하여 렌더링한다.이를 통해 해당 문제를 해결할 수 있었다.