首页
所有分类
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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
简明json介绍
Sep 28 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
深入理解JavaScript系列（26）：设计模式之构造函数模式详解
Mar 03 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
js键盘事件实现人物的行走
Jan 17 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
入门基础(1) Geospatial(1) 触发器(3) XML(1) IOC(3) Vmware(3) Bean(3) RabbitMQ(3) Hash(1) 数据类型(8)
You might like
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
js实现三级联动效果（简单易懂）
2017/03/27 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[00:32]2016完美“圣”典风云人物：Maybe宣传片
2016/12/05 DOTA
[01:01]2020完美高校联赛（秋）西安落幕
2021/03/11 DOTA
详解Python中for循环的使用
2015/04/14 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
python3 shelve模块的详解
2017/07/08 Python
Python中协程用法代码详解
2018/02/10 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python从子线程中获得返回值的方法
2019/01/30 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
MIRTA官网：手工包，100%意大利制造
2020/02/11 全球购物
党的群众路线对照检查材料范文
2014/09/24 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
Pandas加速代码之避免使用for循环
2021/05/30 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
Mysql开启外网访问
2022/05/15 MySQL