Vue.js에서 v-html로 렌더링된 DOM에 범위가 지정된 스타일을 추가하는 방법 소개

이 글에서는 Vue.js에서 v-html로 렌더링된 DOM에 범위 지정 스타일을 추가하는 방법을 소개합니다. 필요한 경우 친구들이 참조할 수 있습니다. 나는 그것이 당신에게 도움이 되기를 바랍니다.

vue.js에서 문자열을 html로 렌더링하려면 v-html 명령을 사용할 수 있습니다.

그러나 공식 문서의 v-html 부분도

단일 파일 구성 요소에서 범위스타일 > HTML의 해당 부분이 Vue의 템플릿 컴파일러에 의해 처리되지 않기 때문에 v-html 내부에는 적용되지 않습니다. v-html의 콘텐츠에 대해 범위가 지정된 CSS를 설정하려면 이를 CSS 모듈로 바꾸거나 추가 전역
위 코드는 다음으로 컴파일됩니다:

...

Sass와 같은 일부 전처리기는 올바르게 구문 분석할 수 없습니다>>>. 이 경우 /deep/ 연산자를 대신 사용할 수 있습니다. 이는 >>>의 별칭이며 잘 작동합니다. 예

<div v-html="contentView"></div>

<style scoped>
.product-content {
    ...
    /deep/ h4 {
      color: #333;
      ...
    }
  }
</style>

[관련 권장 사항:

위 내용은 Vue.js에서 v-html로 렌더링된 DOM에 범위가 지정된 스타일을 추가하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!