vue.js 인라인 스타일 바인딩되기 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

vue.js 인라인 스타일 바인딩되기 정보

기타 vue.js 인라인 스타일 바인딩되기

본문

인라인 스타일 바인딩되기

 

#객체 구문 

v-bind:style객체 구문은 매우 직설적입니다. 
거의 CSS처럼 보이지만 javascript객체입니다.
속성 이름에 camelCase와 kebab-case(따옴표를 함께 사용해야 합니다)를 사용할 수 있습니다.

HTML 부분
<div v-bind:style="{color:activeColor, fontsize:fontSize+'px'}"></div>

JS부분
data:{
    activeColor: 'red',
    fontSize: 30
}

스타일 객체에 직접 바인딩하여 템플릿이 더 간결하도록 만드는 것이 좋습니다.

HTML부분
<div v-bind:style="styleObject"></div>

JS부분
data:{
    styleObject:{
        color:'red',
        fontSize: '30px'
    }
}

다시 객체 구문은 종종 객체를 반환하는 계산된 속성과 함께 사용합니다.

#배열구문

v-bind:style에 대한 배열 구문은 같은 스타일의 엘리먼트에 여러개의 스타일 객체를 사용할 수 있게 합니다.

HTML부분
<div v-bind:style="[basestyles, overridingStyles]"></div>

JS부분

data:{
        basestyles: {
            fontSize: '30px'
        }, 
        overridingStyles:{
            color :'yellow'
        }
}

#자동 접두사가
v-bind:style에 브라우저 벤더접두어가 필요한 CSS속성(예:transform)을 사용하면
Vue는 자동으로 해당 접두어를 감지하여 스타일을 적용합니다.

#다중 값 제공

2.3버전부터 스타일 속성에 접두사가 있는 여러 값을 배열로 전달할 수 있습니다.
예제입니다.

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex']}"></div>
브라우저가 지원하는 배열의 마지막 값만 렌더링합니다.
이 예제에서는 flexbox의 접두어가 붙지 않은 버전을 지원하는 브라우저에 대해 display:flex를 렌더링합니다.
 

추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT