Jade/Pug：変数にデータがない限りdivを表示しない

Question

divがローカル変数にデータを受け取らない限り、divを非表示にしたい。私は現時点でこれを持っています：

div#cost 
     p You earn #{cost} a day! 

しかし、それはページに表示されます。データを受け取るまではどうやって隠すのですか？まず

Answer 1

-if (cost) 
    div#cost 
     p You earn #{cost} a day! 

ジェイドの場合/他の構文について混乱イム、-は、それがバッファなし Javascriptのコードであることを意味します。これはテンプレートの最終版ではレンダリングされません。そのような場合は、script.のようなスクリプトタグを使用する必要があります。

第2に、ifステートメントは、コストがnullまたは未定義でないかどうかをチェックします。それが存在しない場合、ifステートメント内のコードはスキップされます。コストがnullに等しいか、未定義でない場合

上記のコードは、次のHTMLになります：あなたが達成しようとしている何

<div id="cost"> 
    <p>You earn ... cost a day!</p> 
</div> 

Answer 2

することはできません。 jade/pugはテンプレートエンジンです。プレースホルダ変数を与えたり、ループや条件を実行したりできますが、ブラウザはjade/pugを理解できません.HTMLだけしか理解できません。つまり、テンプレートは静的HTMLコンテンツに変換されて表示されます。

if/elseブロックは、生成されたHTMLファイルに何が含まれるかを決定します。ファイルが生成されると、jade/pugはそれを制御できません。

DOMを動的に制御したい場合は、Angular、Vue、ReactなどのWebフレームワークを使用するか、jQueryを使用してDOM操作を行うか、通常のJavascriptを使用してDOM操作を行うことができます。