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개