把一个含有对象的数组里面的数据用模板字符串渲染到页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板字符串的应用</title>
<style>
body {
padding: 50px 0 0 300px;
font-size: 22px;
}
ul {
padding: 0;
}
p {
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>学生信息表</p>
<ul id="list">
<li></li>
</ul>
<script></script>
</body>
<script>
var arr = [
{
username: "XiaoMing",
age: 18,
sex: "male",
},
{
username: "ZhangSan",
age: 28,
sex: "male",
},
{
username: "Lucy",
age: 20,
sex: "female",
},
];
// 定义一个获取性别的函数
const getSex = (sex) => {
return sex === "male" ? "男" : "女";
};
var li = document.querySelector("li");
let liString = "";
const ul = document.querySelector("ul");
// 使用for循环得到数组里面的值
for (let i = 0; i < arr.length; i++) {
// 数组里面是一个对象
const element = arr[i];
// 每一次for循环生成一个li
liString += ` <li>我叫${element.username},性别${getSex(
element.sex
)},今年${element.age}岁</li>`;
}
// 把所有li挂到ul上面
ul.innerHTML = liString;
</script>
</html>
