目标效果图：
也许你会说，多简单，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;
}
转载于:https://www.cnblogs.com/toly-top/p/9782018.html
