首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 25, 2017

实现效果：

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": "//img.jbzj.com/file_images/article/201708/15-128.png",
     "small": "//img.jbzj.com/file_images/article/201708/15-128.png"
    }
   },
   {
    "title": "Freebie: 4 Great Looking Pricing Tables",
    "image": {
     "large": "//img.jbzj.com/file_images/article/201708/15-128.png",
     "small": "//img.jbzj.com/file_images/article/201708/15-128.png"
    }
   },
   {
    "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
    "image": {
     "large": "//img.jbzj.com/file_images/article/201708/15-128.png",
     "small": "//img.jbzj.com/file_images/article/201708/15-128.png"
    }
   },
   {
    "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
    "image": {
     "large": "//img.jbzj.com/file_images/article/201708/15-128.png",
     "small": "//img.jbzj.com/file_images/article/201708/15-128.png"
    }
   },
   {
    "title": "Learn SQL In 20 Minutes",
    "image": {
     "large": "//img.jbzj.com/file_images/article/201708/15-128.png",
     "small": "//img.jbzj.com/file_images/article/201708/15-128.png"
    }
   },
   {
    "title": "Creating Your First Desktop App With HTML, JS and Electron",
    "image": {
     "large": "//img.jbzj.com/file_images/article/201708/15-128.png",
     "small": "//img.jbzj.com/file_images/article/201708/15-128.png"
    }
   }]
  }
 });
</script>
</body>
</html>

以上这篇Vue.js实现网格列表布局转换方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
深入理解JavaScript系列（47）：对象创建模式（上篇）
Mar 04 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
微信小程序 时间格式化（util.formatTime(new Date)）详解
Nov 16 Javascript
使用node.js搭建服务器
May 20 Javascript
Node学习记录之cluster模块
May 31 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 #Javascript
Angular2 组件交互实例详解
Aug 24 #Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
探究react-native 源码的图片缓存问题
Aug 24 #Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 #Javascript
10个最优秀的Node.js MVC框架
Aug 24 #Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 #Javascript
口号(179) 协议书(568) 工作总结(1972) 说明书(38) 公证书(45) 任命书(51) 党团范文(807) 检举信(8) 标语(336) 报告(147)
You might like
文章推荐系统（三）
2006/10/09 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP面向对象中new self（）与 new static（）的区别浅析
2017/08/17 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
javascript实现连续赋值
2015/08/10 Javascript
理解javascript闭包
2015/12/15 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
python使用urllib2提交http post请求的方法
2015/05/26 Python
pandas多级分组实现排序的方法
2018/04/20 Python
儿童python练习实例
2018/05/27 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
美的官方商城：Midea
2016/09/14 全球购物
和平主题的演讲稿
2014/01/12 职场文书
优秀老师事迹材料
2014/02/05 职场文书
公休请假条
2014/04/11 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
校运动会广播稿（100篇）
2014/09/12 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
幼儿园国培研修日志
2015/11/13 职场文书