vue.js 동적 스타일 애플리케이션 : 부울 값을 기반으로 요소 마진을 올바르게 수정하는 방법은 무엇입니까?

vue.js 동적 스타일 : CSS 선택기를 영리하게 사용하여 마진 수정 문제를 해결합니다.

Vue.js 개발에서 요소 스타일의 동적 조정이 일반적인 요구 사항입니다. 이 기사는 부울 값을 기반으로 한 동적 수정 요소 마진에 대한 문제를 해결합니다.

문제 설명 :

개발자는 동적 클래스 이름을 active 하여 요소의 여백을 제어하려고합니다. 부울 iscollapse 변경되면 active 클래스 이름을 추가하거나 제거해야하므로 요소의 padding-left 변경해야합니다. 그러나 초기 CSS 코드는 유효하지 않습니다.

코드 스 니펫 :

VUE 구성 요소 코드 :

<div :class="{ active: iscollapse }" class="content">
  <myheader :iscollapse="!iscollapse"></myheader>
</div>

데이터 () {
  반품 {
    iscollapse : 거짓
  };
},
방법 : {
  changemenu () {
    this.iscollapse =! this.iscollapse;
  }
}

잘못된 초기 CSS 코드 :

 .콘텐츠 {
  왼쪽 패딩 : 200px;
  .활동적인 {
    왼쪽 패딩 : 65px;
  }
}

문제 분석 :

문제는 CSS 선택기를 사용하는 것입니다. 초기 코드는 Descendant Selector .content .active 사용하여 .active 클래스가 .content 의 자식 요소 여야합니다. 실제로 active 클래스는 .content 요소에 직접 작용합니다.

해결책:

올바른 CSS 선택기 .content 조합 .content.active active 합니다.

올바른 CSS 코드 :

 .콘텐츠 {
  왼쪽 패딩 : 200px;
}
.content.active {
  왼쪽 패딩 : 65px;
}

또는 Sass를 사용하는 것이 더 쉽습니다.

 .콘텐츠 {
  왼쪽 패딩 : 200px;
  &.활동적인 {
    왼쪽 패딩 : 65px;
  }
}

SASS 코드는 컴파일 후 위의 CSS 코드와 동일합니다. 둘 다 padding-left: 65px 스타일이 .content 요소에 동시에 active 클래스를 가질 때만 적용되어 초기 코드에서 후손 선택기로 인한 스타일 실패 문제를 해결해야합니다.

위 내용은 vue.js 동적 스타일 애플리케이션 : 부울 값을 기반으로 요소 마진을 올바르게 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!