Vue.js实现网格列表布局转换方法
程序员文章站
2022-09-08 21:58:57
实现效果：
实现代码及注释：
实现效果：
实现代码及注释：
<!doctype html>
<html>
<head>
<title>布局转换</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<style>
/* hide un-compiled mustache bindings
until the vue instance is ready */
[v-cloak] {
display: none;
}
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'open sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
/*-------------------------
导航栏样式
--------------------------*/
.bar{
background-color:#03c03c;
background-image:-webkit-linear-gradient(top, #03c03c, #00ed47);
background-image:-moz-linear-gradient(top, #03c03c, #00ed47);
background-image:linear-gradient(top, #03c03c, #00ed47);
box-shadow: 0 1px 1px #ccc;
border-radius: 5px;
width: 580px;
padding: 10px;
margin: 45px auto 25px;
position:relative;
text-align:right;
line-height: 1;
}
.bar a{
background: #ffe055 center center no-repeat;
width:35px;
height:35px;
display:inline-block;
text-decoration:none !important;
margin-right:5px;
border-radius:5px;
cursor:pointer;
}
.bar a.active{
background-color:orange;
}
.bar a.list-icon{
background-image:url(data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkokyznkfcq0zbmtbcrtexrtm5ndk4rdfem0e5rkq1nezciib4bxbnttpeb2n1bwvudelepsj4bxauzglkokyznkfcq0zcmtbcrtexrtm5ndk4rdfem0e5rkq1nezcij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6rjm2qujdrjgxmejfmtffmzk0othemuqzqtlgrdu0rkiiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6rjm2qujdrjkxmejfmtffmzk0othemuqzqtlgrdu0rkiilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz7h1blqaaaawuleqvr42ml8////bwygbn4gcacxbrliaixaa/4jaxopekmyjj+a/g9mdjqbrhyg8rfqmwg8rjiuinylfdmbui+adqaf1n8ofk9yiay6wpg4ggtdmryaagwadlywlaoiwpgaaaaasuvork5cyii=);
}
.bar a.grid-icon{
background-image:url(data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaybpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumc1jmdywidyxljezndc3nywgmjaxmc8wmi8xmi0xnzozmjowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientnsbxaw5kb3dziib4bxbnttpjbnn0yw5jzulepsj4bxauawlkojbeqkmyqze0mtbcrjexrtnbmdlgrtyyotlbnddcn0i4iib4bxbnttpeb2n1bwvudelepsj4bxauzglkojbeqkmyqze1mtbcrjexrtnbmdlgrtyyotlbnddcn0i4ij4gphhtce1nokrlcml2zwrgcm9tihn0umvmomluc3rhbmnlsuq9inhtcc5pawq6mercqzjdmtixmejgmtffm0ewouzfnji5oue0n0i3qjgiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6mercqzjdmtmxmejgmtffm0ewouzfnji5oue0n0i3qjgilz4gpc9yzgy6rgvzy3jpchrpb24+idwvcmrmoljerj4gpc94onhtcg1ldge+idw/ehbhy2tldcblbmq9iniipz4mjpshaaaaxkleqvr42ml4////h/8i8b6igacykhfgemnawcdiaahvgzgryizknimbqsacxb+hnodaqyq5osqzit4gh1dsbzabh6ab8x/jaqzeig++wpiii7rxio/gwmcibyaaawawvizmp1r0aqaaaabjru5erkjggg==);
}
.bar input{
background:#fff no-repeat 13px 13px;
border: none;
width: 100%;
line-height: 19px;
padding: 11px 0;
border-radius: 2px;
box-shadow: 0 2px 8px #c4c4c4 inset;
text-align: left;
font-size: 14px;
font-family: inherit;
color: #738289;
font-weight: bold;
outline: none;
text-indent: 40px;
}
/*-------------------------
列表布局
--------------------------*/
ul.list{
list-style: none;
width: 500px;
margin: 0 auto;
text-align: left;
}
ul.list li{
border-bottom: 1px solid #ddd;
padding: 10px;
overflow: hidden;
cursor: pointer;
}
ul.list li img{
width:120px;
height:120px;
float:left;
border:none;
}
ul.list li p{
margin-left: 135px;
font-weight: bold;
color:#6e7a7f;
}
/*-------------------------
网格布局
--------------------------*/
ul.grid{
list-style: none;
width: 570px;
margin: 0 auto;
text-align: left;
}
ul.grid li{
padding: 1px;
float:left;
cursor: pointer;
border: 1px solid #e8e8e8;
box-sizing: border-box;
}
ul.grid li img{
width:280px;
height:280px;
object-fit: cover;
display:block;
border:none;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<form id="main" v-cloak>
<div class="bar">
<!-- 这两个按钮用于转换页面布局形式，使得ul布局正确显示 -->
<a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
<a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
</div>
<!-- 现在有两种布局形式，选择哪种布局取决于 layout绑定 -->
<ul v-if="layout == 'grid'" class="grid">
<!-- 这种布局只显示缩略图片不显示文字 -->
<li v-for="a in articles">
<a v-bind:href="a.url" rel="external nofollow" rel="external nofollow" target="_blank"><img v-bind:src="a.image.large" /></a>
</li>
</ul>
<ul v-if="layout == 'list'" class="list">
<!-- 这种布局显示小图片和文字 -->
<li v-for="a in articles">
<a v-bind:href="a.url" rel="external nofollow" rel="external nofollow" target="_blank"><img v-bind:src="a.image.small" /></a>
<p>{{a.title}}</p>
</li>
</ul>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script type="text/javascript">
var demo = new vue({
el: '#main',
data: {
// 布局形式可能的值为grid或者list
layout: 'grid',
articles: [{
"title": "what you need to know about css variables",
// "url":
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "freebie: 4 great looking pricing tables",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "20 interesting javascript and css libraries for february 2016",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "quick tip: the easiest way to make responsive headers",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "learn sql in 20 minutes",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "creating your first desktop app with html, js and electron",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
}]
}
});
</script>
</body>
</html>
以上这篇vue.js实现网格列表布局转换方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。