渲染数据的方式

最新推荐文章于 2023-03-28 09:54:31 发布

fw学前端

最新推荐文章于 2023-03-28 09:54:31 发布

阅读量95

点赞数

分类专栏：前端实用知识文章标签： java javascript 前端

本文链接：https://blog.csdn.net/m0_56356342/article/details/127429261

版权

前端实用知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用JavaScript的forEach和map方法动态地构建HTML新闻列表。通过遍历数据集，为每个新闻项创建包含图片、标题、来源、日期和评论数的结构，并将它们插入到页面的指定位置。此外，还演示了直接创建DOM元素并添加到列表的方法，用于对比不同的数据绑定策略。

摘要由CSDN通过智能技术生成

1.字符串加forEach循环（拼接字符串）

   let htmlstr=''
      res.data.forEach(item=>{
        htmlstr+=`<div class="news-item">
      <img class="thumb" src="http://www.liulongbin.top:3009${item.img}" alt="" />
      <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">${item.title}</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>${item.source}</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>${item.time}</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：${item.cmtcount}</span>
        </div>
      </div>
    </div>`

2.map方法（案例新闻列表）

  let arr=res.data.map(item=>
        `<div class="news-item">
        <img class="thumb" src="http://www.liulongbin.top:3009${item.img}" alt="" />
      <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">${item.title}</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>${item.source}</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>${item.time}</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：${item.cmtcount}</span>
        </div>
      </div>
    </div>`

      )
    
list.innerHTML=arr.join('')

3.创建元素，添加方式

 const {title,id,source,cmtcount,img}=obj[k]
    k++

        let box=document.createElement('div')
        box.classList.add('news-item')
        box.innerHTML=`
      <img class="thumb" src='http://www.liulongbin.top:3009/images/5.webp' alt="" />
      <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">${title}</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>${source}</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>2019-10-28 10:14:38</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：${cmtcount}</span>
        </div>
      </div>
    
        `
      list.appendChild(box)