一、需求
根据数据渲染如下页面
文章来源：https://www.toymoban.com/news/detail-632446.html
文章来源地址https://www.toymoban.com/news/detail-632446.html
二、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>到了这里，关于两种方法（JS方法和Vue方法）实现页面渲染的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
