<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<unit v-for="item in array" :detail="item"></unit>
</div>
</body>
<script>
Vue.component( 'unit',{
props:['detail'],
template:`
<div style="border:1px #aaabac solid;width:1260px;margin:20px auto;">
<div>
<h2>{{detail.title}}</h2>
<span style="float:right;"><a href="#">{{detail.more}}</a></span>
</div>
<div>
<ul>
<li><a href="">{{detail.list[0]}}</a></li>
<li><a href="">{{detail.list[1]}}</a></li>
<li><a href="">{{detail.list[2]}}</a></li>
<li><a href="">{{detail.list[3]}}</a></li>
<li><a href="">{{detail.list[4]}}</a></li>
</ul>
</div>
</div> `
}
);
let vm=new Vue({
el:'#app',
data:{
array:[
{
title : '项目实战',
more : 'more>>',
list : [
'JavaEE现实案例-秒杀系统企业级实战应用(真实工业界案例)',
'小象区块链视频教程(共二期)',
'Python快速入门教程',
'炼数成金实战Java高并发程序设计 完整课件',
'计算机视觉班 [从CV基础到深度学习实战]',
]
},
{
title : 'WEB前端开发',
more : 'more>>',
list : [
'ECMAScript6.0视频教程',
'珠峰Nodejs深入浅出视频教程',
'深入浅出讲解JavaScript设计模式视频教程',
'千F EasyUI框架从入门到实战视频教程',
'设计必知必会的H5策划与认知视频课程',
]
},
],
}
});
</script>
</html>