HTML における if 判断の使用

HTML における if 判断の使用

Django Web開発の過程で、HTMLを書く際にバックエンドから同じ名前のリスト変数が渡されるが、内容の形式が異なるため別途判断する必要がある。多くの記事を参考にし、いくつかの方法を試したが、形式が間違っているようだ(体系的にフロントエンドを勉強したわけではなく、基本的にそのままコピーしただけ)
その後、Djangoフレームワークでhtml ifの使い方を見つけました

フォーマットはおおよそ次のとおりです

  <div class="if/else">
                    {% if フォーム名 == 'Callrecords' %}
                        通話記録
                    {% elif フォーム名 == 'ライドレコード' %}
                        ライドレコード
                    {% elif フォーム名 == 'クラブ情報' %}
                        クラブ情報
                    {% elif フォーム名 == 'クラブメンバー' %}
                        クラブメンバー
                    {% elif フォーム名 == '個人情報' %}
                        個人情報
                    {% 終了 %}
                    </div>

この構文は Django によって提供され、ネイティブ HTML コードの記述で使用されますが、役に立ちません。上記のコード ボックスでは HTML 形式が使用されていますが、<div> タグ間のコンテンツは HTML 言語でマークできないこともわかります。これは、組み込みの HTML 構文ではないことを示しています。
しかし、少なくとも私の Django プロジェクトでは問題なく使用できます。

要約する

上記はエディターが紹介した HTML での if 判断の使い方です。皆様のお役に立てれば幸いです。ご質問があればメッセージを残してください。エディターがすぐに返信いたします。

<<:  MySQLに挿入する前にデータが存在するかどうかを確認する方法

>>:  Vueデータ監視の原理の詳細な説明

推薦する

HTMLハイパーリンクタグAのTARGET属性の詳細な説明

ハイパーリンク <a> タグはリンク ポイントを表します。これは英語の単語「anchor...

この記事では、CSSのようなJSモジュールをインポートする方法を説明します。

目次序文構築可能なスタイルシートとは何ですか? CSSモジュールスクリプトの使用インポートアサーショ...

CSS3で背景画像にカラーマスクを追加する方法

以前、開発中に背景レイヤーにカラーマスクを追加する必要のあるプロジェクトに遭遇しました。ここでは、背...

シンプルな時計を実装するJavaScript

この記事では、JavaScriptでシンプルな時計を実装するための具体的なコードを参考までに紹介しま...

VMware 仮想マシンの NAT モードを構成する方法

この記事では、VMware仮想マシンのNAT構成プロセスを詳しく説明します。具体的な内容は次のとおり...

CocosCreatorでスワイプした位置にテクスチャを表示する方法

目次1. プロジェクト要件2. 文書の内容3. プロジェクト例4. プロジェクトコード1. プロジェ...

vue-admin-template 動的ルーティング実装例

ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...

Vue プロジェクトで axios リクエストを使用する方法

目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...

DockerのTLS(SSL)証明書の有効期限の問題を解決する

問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...

高可用性 Web クラスターを実装するための Keepalived+Nginx+Tomcat サンプル コード

高可用性 Web クラスターを実現する Keepalived+Nginx+Tomcat 1. Ngi...

MySQL 5.7.18 無料インストールバージョンの設定チュートリアル

MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...

Linuxネットワーク構成ツールの使用

この記事では、RHEL8 のネットワーク サービスとネットワーク構成ツール、およびネットワーク ファ...

MySQL ステートメントを使用した簡単な追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL ステートメントを使用して、単純な追加、削除、変更、およびクエ...

Dockerデータ管理とネットワーク通信の使用

Docker をインストールし、Docker コアとインストールを通じて簡単な操作を実行できます。 ...

Vue は動的な円形のパーセンテージ進捗バーを実装します

最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装...