欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js实现网格列表布局转换方法

程序员文章站 2022-04-29 08:12:02
实现效果: 实现代码及注释:

实现效果:

Vue.js实现网格列表布局转换方法

实现代码及注释:

<!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实现网格列表布局转换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。