如何将HTML模板与JS数据结合渲染_如何将HTML模板与JS数据结合渲染实现

const user = { name: "张三", age: 25, email: "zhangsan@example.com" };

const html = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>年龄：${user.age}</p>
    <p>邮箱：${user.email}</p>
  </div>
`;

document.getElementById("app").innerHTML = html;

const user = { name: "李四", age: 30 };

const div = document.createElement("div");
div.className = "user-card";

const h2 = document.createElement("h2");
h2.textContent = user.name;

const p = document.createElement("p");
p.textContent = `年龄：${user.age}`;

div.appendChild(h2);
div.appendChild(p);

document.getElementById("app").appendChild(div);

<script id="user-template" type="text/x-handlebars-template">
  <div class="user-card">
    <h2>{{name}}</h2>
    <p>年龄：{{age}}</p>
  </div>
</script>

<div id="app"></div>

const source = document.getElementById("user-template").innerHTML;
const template = Handlebars.compile(source);
const data = { name: "王五", age: 28 };
const result = template(data);

document.getElementById("app").innerHTML = result;

function UserCard({ user }) {
  return (
    <div className="user-card">
      <h2>{user.name}</h2>
      <p>年龄：{user.age}</p>
    </div>
  );
}