目标效果图：
也许你会说，多简单，ul的li,写一个，然后复制很多个，改改不就行了吗！
然后你就会看到li下面满篇的标签加零零散散的数据散落你的html里。
由于每个图片描述信息不同，在散乱的标签你还要找到修改的地方。
下面通过Vue来让html结构和数据分离，从而达到易于阅读，容易维护的效果
html结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="css/scss/stylesheets/screen.css">
<script src="js/vue2.5.16.min.js"></script>
<body>
<div id="box">
<ul>
<li v-for="(val, key, index) in imgData" :key="index">
<a href="" ><img :src="val.src"></a>
<p><a href="">{{val.name}}</a>
<span>{{val.nation}}</span>
<span class="star">{{val.star}}</span></p>
<div class="bottom">{{val.has}}</div>
</li>
</ul>
</div>
<script src="js/data.js"></script>
</body>
</html>
数据：js/data.js
1.将数据抽取出来，可交由别人来编写、维护。
2.由于只是对字符数据的简单处理，所以并不需要很高的技术，普通人皆可以胜任。
3.可为前端人员省去不必要的麻烦，从而让其只专注于前端技术开发。
new Vue({
el: "#box",
data: {
imgData: [{
"name": "奥西里斯的天空龙",
"nation": "神族",
"src":"css/scss/images/tkl.jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "青眼白龙",
"nation": "龙族",
"src":"css/scss/images/1318428790913859267.jpg",
"star": "☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "八岐大蛇",
"nation": "龙族",
"src":"css/scss/images/1479995427544648690.jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "破坏龙",
"nation": "龙族",
"src":"css/scss/images/1777233002951111028.jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "邪恶骑士龙",
"nation": "龙族",
"src":"css/scss/images/Serpent Night Dragon 邪恶骑士龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "流天类星龙",
"nation": "龙族",
"src":"css/scss/images/Shooting Quasar Dragon 流天类星龙[编辑].png",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "流星龙",
"nation": "龙族",
"src":"css/scss/images/Shooting Star Dragon 流星龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "天空龙",
"nation": "龙族",
"src":"css/scss/images/Sky Dragon 天空龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "千年龙",
"nation": "龙族",
"src":"css/scss/images/Thousand Dragon 千年龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "虎龙",
"nation": "龙族",
"src":"css/scss/images/Tiger Dragon 虎龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "民艺龙",
"nation": "神族",
"src":"css/scss/images/Totem Dragon 民艺龙.jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "暴君龙",
"nation": "龙族",
"src":"css/scss/images/Tyrant Dragon 暴君龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "灵魂龙",
"nation": "龙族",
"src":"css/scss/images/Spirit Ryu 灵魂龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "三角魔龙",
"nation": "龙族",
"src":"css/scss/images/Tri-Horned Dragon 三角魔龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "三头龙王",
"nation": "龙族",
"src":"css/scss/images/Trident Dragion 三头龙王[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "多尔·多拉",
"nation": "龙族",
"src":"css/scss/images/Twin-Headed Behemoth 多尔·多拉[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "邪恶骑士龙",
"nation": "龙族",
"src":"css/scss/images/Serpent Night Dragon 邪恶骑士龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "流天类星龙",
"nation": "龙族",
"src":"css/scss/images/Shooting Quasar Dragon 流天类星龙[编辑].png",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "流星龙",
"nation": "龙族",
"src":"css/scss/images/Shooting Star Dragon 流星龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "天空龙",
"nation": "龙族",
"src":"css/scss/images/Sky Dragon 天空龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "千年龙",
"nation": "龙族",
"src":"css/scss/images/Thousand Dragon 千年龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "虎龙",
"nation": "龙族",
"src":"css/scss/images/Tiger Dragon 虎龙[编辑].jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "民艺龙",
"nation": "神族",
"src":"css/scss/images/Totem Dragon 民艺龙.jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
},{
"name": "红龙",
"nation": "神族",
"src":"css/scss/images/Tyhone #.2 红龙.jpg",
"star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
"has": "未获取"
}]
}
})
样式：
ol, ul {
list-style: none;
}
@font-face {
font-family: myfont;
src: url('../fonts/ygyxsziti2.0.ttf');
}
body {
background: ghostwhite;
font-family: myfont;
}
#box {
width: 900px;
margin: 0 auto;
}
#box ul li {
background-color: #D6EAFD;
height: auto;
width: 164px;
border: 1px solid #aaa;
float: left;
margin: 5px;
}
#box ul li img {
width: 100%;
height: 160px;
align-content: center;
}
.bottom {
height: 40px;
line-height: 40px;
text-align: center;
background: #eee;
}
.star {
font-size: 14px;
letter-spacing: -3px;
}
p a {
display: block;
line-height: 23px;
padding-left: 10px;
}
p span {
display: block;
line-height: 23px;
padding-left: 10px;
}
.top {
height: 40px;
}
.top a {
height: 20px;
width: 20px;
display: block;
float: right;
margin: 5px;
}