728x90
아래와 같이 상황에 따라 길이를 다르게 적용해야할때가 있다.
C가 있다면 보여주고, 없으면 안보여주는 상태.
비율로해서 없는 부분이 채워지게 할 수 도 있겠지만,
C가 있는지 없는지에 대한 조건을 달아서 width값을 다르게 적용해보자.
방법은 간단하다.
"[ ]" 로 감싸고 그 안에 삼항 연산자 형식으로 입력하면된다.
:style = "[countC > 0 ? 'width: 33.3%' :'width: 50%']"** 주의할 점.
여기서는 css와는 다르게 카멜표기법이 아닌, 스네이크형식으로 입력해야한다.
ex) backgroundColor (X), background-color (O)
Vue 2 버전 방식
문법이 조금 다르니 참고하기!
:style = "[countC > 0 ? {'width': '33.3%'} : {'width': '50%'}]"
728x90
'Front-end > Vue.js' 카테고리의 다른 글
| Vue3) 모달창(팝업)을 만드는 2가지 방법. v-if, vuex store (0) | 2023.03.22 |
|---|---|
| Vue) 이미지 URL 입력 시 로드가 안되거나 [object Module] 뜨는 경우 (0) | 2023.02.15 |
| Vue ) 프록시 설정. Dev Server has been initialized using an options object that does not match the API schema. (0) | 2022.11.19 |
| Vue.js) 스크롤 감지하기. 스크롤 할 때마다 특정 함수 실행 (0) | 2022.09.29 |
| Vue.js) Vue 시작하기, 설치하기(**cil없이 설치) (0) | 2022.09.29 |