vue.js 인라인 스타일 바인딩되기 2 정보
기타 vue.js 인라인 스타일 바인딩되기 2본문
인라인 스타일 바인딩되기
#배열구문
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
댓글 0개