バックエンドから返されたデータをトラバースしてフロントエンド ページに表示する方法

        フロントエンド Xiaobai は、フロントエンド処理とバックエンドによって返された結果を単に記録してフロントエンド ページに表示し、偽のデータを含むページを直接コピーしてバックエンド データを表示します。

効果を実感してください:

 元のページのコード:

 <el-col class="mb40" :span="24" :sm="12" :md="12" :lg="8" :xl="8">
            <div class="item-center">
              <div class="gitee-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_person.png" alt="" />
                </div>
                <span class="item-value">2222</span>
                <span class="traffic-name sle">Gitee 访问量</span>
              </div>
              <div class="gitHub-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_team.png" alt="" />
                </div>
                <span class="item-value">2222</span>
                <span class="traffic-name sle">GitHub 访问量</span>
              </div>
              <div class="today-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/today.png" alt="" />
                </div>
                <span class="item-value">4567</span>
                <span class="traffic-name sle">今日访问量</span>
              </div>
              <div class="yesterday-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/book_sum.png" alt="" />
                </div>
                <span class="item-value">1234</span>
                <span class="traffic-name sle">昨日访问量</span>
              </div>
            </div>
          </el-col>

バックエンドから渡されたデータコレクションを表示したい場合は、Vue.jsが提供するリスト表示機能を利用できます。

1. まず、Vue インスタンスでコレクション データを定義する必要があります。次に例を示します。

data() {
  return {
    items: [
      { title: '综合报表', value: 2222 },
      { title: '自助查询', value: 2222 },
      { title: '管理驾驶舱', value: 4567 },
      { title: '业务场景', value: 1234 },
      { title: '宽表模型', value: 1234 },
    ]
  }
}

2. 次に、v-for ディレクティブを使用して、レンダリングのためにコレクション データを HTML 要素にバインドできます。次に例を示します。

<div class="item-center">
  <div v-for="(item, index) in items" :key="index" class="traffic-box">
    <div class="traffic-img">
      <img src="./images/book_sum.png" alt="" />
    </div>
    <span class="item-value">{
   
   { item.value }}</span>
    <span class="traffic-name sle">{
   
   { item.title }}</span>
  </div>
</div>

        ここではv-for コマンドを使用して項目内のすべての要素を走査し、指定した HTML コードと同様のデータをレンダリングします。一意のインデックス値を持つ :key 属性を使用すると、Vue が各要素を識別するのに役立ちます。

上記のコードを参照して、実際のニーズに応じて変更を加えれば、最終的な結果は素晴らしいものになります。