2-3、模板字符串的应用

57 阅读1分钟
<style>
    boby {
        padding: 50px 0 0 300px;
    }

    ul {
        padding: 0;
    }

    p {
        margin-bottom: 10px;
    }
</style>

<body>
    <p>学生信息表</p>
    <ul id="list">
        <li style="list-style: none;">信息加载中......</li>
    </ul>
</body>
<script>
    // 数据
    const students = [
        {
            username: 'Alex',
            age: 18,
            sex: 'male'
        },
        {
            username: 'ZhangSan',
            age: 28,
            sex: 'male'
        },
        {
            username: 'LiSi',
            age: 20,
            sex: 'female'
        }
    ];

    const list = document.getElementById('list');

    let html = '';
    for (let i = 0; i < students.length; i++) {
        html += `<li>我的名字是${students[i].username},${students[i].sex},${students[i].age}</li>`
    }
    list.innerHTML = html;
</script>