首页 > 解决方案 > 从 api 列表访问每个项目

问题描述

axios.get("https://api.vschool.io/<username>/todo")
    .then(response => {
        for(let i = 0; i < response.data.length; i++){
            const h1 = document.createElement('h1')
            h1.textContent = response.data[i].title
            document.body.appendChild(h1)
        }
    })
    .catch(error => console.log(error))

我已经完成了一个 api 列表并让它出现在浏览器中。我正在尝试对其进行样式设置并稍微移动它,但对于我的生活,我不知道如何访问每个单独的项目(我的最终目标是能够在特别是项目时划线完成。谢谢

标签: javascriptapiaxios

解决方案


检查状态是否是假设completed然后为该 h1 添加一个类

axios.get("https://api.vschool.io/<username>/todo")
.then(response => {
    for(let i = 0; i < response.data.length; i++){
        const h1 = document.createElement('h1');
        h1.textContent = response.data[i].title;
        if (response.data[i].taskStatus == 'completed'){
            h1.classList.add('completed')
        }
        document.body.appendChild(h1);
    }
})
.catch(error => console.log(error))

CSS

.completed{
    text-decoration-line: line-through;
}

推荐阅读