programing

div 인라인에 클래스를 추가하기위한 Jade 조건부 (if / else)

nasanasas 2020. 11. 16. 21:35
반응형

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

반응형