一、需求
根據(jù)數(shù)據(jù)渲染如下頁面
文章來源：http://www.zghlxwxcb.cn/news/detail-632446.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-632446.html
二、JS方法
<body>
<!-- 4. box核心內(nèi)容區(qū)域開始 -->
<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. 重構(gòu)
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 網(wǎng)絡(luò)動態(tài)圖片加載實戰(zhàn)',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城實戰(zhàn)項目演練',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 實戰(zhàn)項目演練',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源碼深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首頁界面切換效果實戰(zhàn)演練',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 從入門到精通實戰(zhàn)案例',
num: 888
},
{
src: 'images/course08.png',
title: 'Cocos 深度學習你不會錯過的實戰(zhàn)',
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核心內(nèi)容區(qū)域開始 -->
<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. 重構(gòu)
const app=new Vue({
el:'.clearfix',
data:{
list:[
{
id:1,
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練',
num: 1125
},
{
id:2,
src: 'images/course02.png',
title: 'Android 網(wǎng)絡(luò)動態(tài)圖片加載實戰(zhàn)',
num: 357
},
{
id:3,
src: 'images/course03.png',
title: 'Angular2 大前端商城實戰(zhàn)項目演練',
num: 22250
},
{
id:4,
src: 'images/course04.png',
title: 'Android APP 實戰(zhàn)項目演練',
num: 389
},
{
id:5,
src: 'images/course05.png',
title: 'UGUI 源碼深度分析案例',
num: 124
},
{
id:6,
src: 'images/course06.png',
title: 'Kami2首頁界面切換效果實戰(zhàn)演練',
num: 432
},
{
id:7,
src: 'images/course07.png',
title: 'UNITY 從入門到精通實戰(zhàn)案例',
num: 888
},
{
id:8,
src: 'images/course08.png',
title: 'Cocos 深度學習你不會錯過的實戰(zhàn)',
num: 590
},
]}
})
</script>
</body>
</html>到了這里，關(guān)于兩種方法（JS方法和Vue方法）實現(xiàn)頁面渲染的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
