vuejs 귀속 class 와 style 스타일

1425 단어 vue귀속classstyle
귀속 Html 클래스
우 리 는 v-bind:class 의 대상 을 동적 으로 전환 할 수 있 습 니 다.v-bind:class 명령 은 일반적인 class 특성 과 공존 할 수 있 습 니 다:

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
data: { isA: true, isB: false}
렌 더 링 결과:<div class="static class-a"></div>데이터 에 있 는 대상 을 직접 연결 할 수 있 습 니 다.결 과 는 위의 것 과 일치 합 니 다.

<div v-bind:class="classObject"></div>
data: {
classObject: {
 'class-a': true,
 'class-b': false
}
}
바 인 딩 내 연 스타일
v-bind:style 의 대상 문법 은 매우 직관 적 이다―보기 에는 CSS 와 매우 비슷 하지만 사실은 자바 스 크 립 트 대상 이다.CSS 속성 명 은 낙타 봉 식(camelCase)또는 짧 은 가로 구분 이름(kebab-case)을 사용 할 수 있 습 니 다.

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
대상 에 직접 연결(템 플 릿 을 선명 하 게)

<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
비고:v-bind:style 이 제조 업 체 접두사 가 필요 한 CSS 속성 을 사용 할 때 transform,Vue.js 는 자동 으로 접 두 사 를 검색 하고 추가 합 니 다.
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!
php 오픈 ssl 기반 rsa 암호 화 복호화 예시
php 2 층 필터 로 댓 글 내용 얻 는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage