div 인라인에 클래스를 추가하기위한 Jade 조건부 (if / else)
옥 템플릿에서이 인라인을 수행하는 방법이 있습니까?
if(typeof fromEdit != 'undefined')
div#demo.collapse.in
else
div#demo.collapse
이 조건부 검사를 "인라인"으로 수행하고 결과는 fromEdit가 존재하는 경우 div 끝에 .in을 추가합니다.
이것은 작동합니다 :
div#demo.collapse(class=typeof fromEdit === "undefined" ? "" : "in")
여기에서 사용해보십시오 .
값이 없을 때 클래스 속성을 추가하지 않으려면 빈 문자열 대신 undefined를 할당 할 수 있습니다. 다음은 약간 수정 된 이전 예입니다.
div#demo.collapse(class=typeof fromEdit === "undefined" ? undefined : "in")
업데이트 : 또한 pug 를 사용하는 경우 이제 class=
다른 조건으로 원하는만큼 선언을 추가 할 수 있으며 결과 클래스 속성에 연결됩니다. 예 :
#demo.collapse(class=cond1 && 'class1' class=cond2 && 'class2')
http://jade-lang.com/reference/attributes/에 문서화되어 있습니다 .
클래스 속성 [...] 또한 조건부 클래스를 적용하는 데 유용한 클래스 이름을 true 또는 false 값으로 매핑하는 개체 일 수 있습니다.
이 작업은 다음 방법으로도 수행 할 수 있습니다.
div#demo.collapse(class={ in: typeof fromEdit != 'undefined' })
http://naltatis.github.com/jade-syntax-docs/ (나는 그들이 무언가를 업데이트해야한다고 생각 합니다) 여기에서 작동하지 않지만 jade@1.11.0에서는 작동합니다.
pug 2에서는 다음 구문을 사용할 수 있습니다.
div#demo(class="collapse", class={"in": typeof fromEdit !== 'undefined'}) Home page
더 많은 정보 : https://pugjs.org/language/attributes.html
오래된 질문이지만 Pug에는 개체 존재 감지 기능이 내장되어 있기 때문에 다음과 같은 작업이 있습니다.
div#demo.collapse(class=fromEdit? 'in':undefined)
명확하지 않은 경우 fromEdit
존재 여부와 in
클래스로 입력되는지 확인 하고 그렇지 않으면 클래스를 비워 둡니다.
참고 URL : https://stackoverflow.com/questions/14144274/jade-conditional-if-else-to-add-class-to-div-inline
'programing' 카테고리의 다른 글
Google의 색인 생성 중지 (0) | 2020.11.16 |
---|---|
Google AngularJS 프레임 워크-위험할만한 가치가 있습니까? (0) | 2020.11.16 |
프로그래머 드보락 레이아웃으로 전환 할 생각 (0) | 2020.11.16 |
C ++ 및 D의 메타 프로그래밍 (0) | 2020.11.16 |
CSS : 첫 글자가 작동하지 않음 (0) | 2020.11.16 |