使用 JavaScript 有条件地在 HTML 中渲染数据-html教程-PHP中文网

使用 JavaScript 有条件地在 HTML 中渲染数据

DDD

发布： 2025-08-24 18:10:01

原创

556人浏览过

使用 javascript 有条件地在 html 中渲染数据

本文将介绍如何使用 JavaScript 动态地在 HTML 中渲染对象属性，并根据属性值是否存在来决定是否显示它们。我们将探讨一种更简洁的方法，避免冗余的代码，提高代码的可维护性和可读性。通过使用对象键值对和数组方法，可以有效地处理条件渲染的需求。

动态渲染对象属性

在Web开发中，经常需要根据数据动态生成HTML内容。当数据对象包含可选属性时，我们可能希望只显示那些存在的属性。下面我们将介绍一种更简洁的方法来实现这一目标。

假设我们有一个包含方向信息的对象：

let dirs = { nord: 10, est: 19, sudouest: 5 };

登录后复制

我们希望将这些方向信息以“标签: 值”的形式显示在HTML中，但只显示那些值不为null或undefined的属性。

立即学习“Java免费学习笔记（深入）”；

更简洁的实现方法

避免使用大量的条件判断和重复的代码，我们可以利用JavaScript的对象和数组方法来简化实现。

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

查看详情

首先，创建一个翻译对象，将属性名映射到更友好的显示名称：

const translations = {
  nord: 'Nord',
  sud: 'Sud',
  ouest: 'Ouest',
  est: 'Est',
  sudouest: 'Sud-ouest',
  sudest: 'Sud-est',
  nordouest: 'Nord-ouest',
  nordest: 'Nord-est'
}

登录后复制

然后，使用Object.entries()方法将对象转换为键值对数组，并使用map()方法遍历该数组，为每个键值对生成HTML字符串。

function print_directions(dirs) {
  const translations = {
    nord: 'Nord',
    sud: 'Sud',
    ouest: 'Ouest',
    est: 'Est',
    sudouest: 'Sud-ouest',
    sudest: 'Sud-est',
    nordouest: 'Nord-ouest',
    nordest: 'Nord-est'
  }

  const html = Object.entries(dirs)
    .map(([dir, value]) =>
      `<div class="info-dir">
        ${translations[dir] || dir}:
        <span>${value}</span>
      </div>`
    )
    .join('');
  document.querySelector(".content").innerHTML = html;
}

let dirs = { nord: 10, est: 19, sudouest: 5 };
print_directions(dirs);

登录后复制

在这个代码中：

Object.entries(dirs)将dirs对象转换为一个数组，其中每个元素都是一个包含键和值的数组，例如[['nord', 10], ['est', 19], ['sudouest', 5]]。
map(([dir, value]) => ...)遍历这个数组，为每个键值对生成一个HTML字符串。
translations[dir] || dir使用翻译对象来获取方向的显示名称。如果翻译对象中不存在该方向的名称，则使用原始的属性名。
join('')将所有生成的HTML字符串连接成一个字符串。
最后，将生成的HTML字符串插入到.content元素中。

示例代码

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Conditional Rendering</title>
  <style>
    .d-none {
      display: none;
    }
  </style>
</head>
<body>
  <div class="content"></div>

  <script>
    function print_directions(dirs) {
      const translations = {
        nord: 'Nord',
        sud: 'Sud',
        ouest: 'Ouest',
        est: 'Est',
        sudouest: 'Sud-ouest',
        sudest: 'Sud-est',
        nordouest: 'Nord-ouest',
        nordest: 'Nord-est'
      }

      const html = Object.entries(dirs)
        .map(([dir, value]) =>
          `<div class="info-dir">
            ${translations[dir] || dir}:
            <span>${value}</span>
          </div>`
        )
        .join('');
      document.querySelector(".content").innerHTML = html;
    }

    let dirs = { nord: 10, est: 19, sudouest: 5 };
    print_directions(dirs);
  </script>
</body>
</html>

登录后复制