一、需求
根据数据渲染如下页面
二、JS方法
<body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><!-- <li><a href="#"><img src=${data[i].src} alt=""><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a></li> --></ul></div></div><script>// 1. 重构 let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},]document.querySelector('.clearfix').innerHTML=data.map(item=>`<li><a href="#"><img src=${item.src} alt=""><h4>${item.title}</h4><div class="info"><span>高级</span> • <span>${item.num}</span>人在学习</div></a></li>`).join('')</script>
</body></html>三、Vue方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>学成在线首页</title><link rel="stylesheet" href="./css/style.css"><style></style>
</head><body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li v-for="(item) in list" :key="item.id"><a href="#"><img :src=item.src alt=""><h4>{{item.title}}</h4><div class="info"><span>高级</span> • <span>{{item.num}}</span>人在学习</div></a></li></ul></div></div><script src="../vue.js"></script><script>// 1. 重构const app=new Vue({el:'.clearfix',data:{list:[{id:1,src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{id:2,src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{id:3,src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{id:4,src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{id:5,src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{id:6,src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{id:7,src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{id:8,src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},]}}) </script>
</body></html>
