网格列表布局转换

实现效果：

实现代码及注释：

<!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" 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" 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": "https://cdn4.iconfinder.com/data/icons/space-1/48/46-128.png",

                    "small": "https://cdn4.iconfinder.com/data/icons/space-1/48/46-128.png"

                }

            },

            {

                "title": "Freebie: 4 Great Looking Pricing Tables",

                "image": {

                    "large": "https://cdn4.iconfinder.com/data/icons/space-1/48/22-128.png",

                    "small": "https://cdn4.iconfinder.com/data/icons/space-1/48/22-128.png"

                }

            },

            {

                "title": "20 Interesting JavaScript and CSS Libraries for February 2016",

                "image": {

                    "large": "https://cdn4.iconfinder.com/data/icons/space-1/48/10-128.png",

                    "small": "https://cdn4.iconfinder.com/data/icons/space-1/48/10-128.png"

                }

            },

            {

                "title": "Quick Tip: The Easiest Way To Make Responsive Headers",

                "image": {

                    "large": "https://cdn4.iconfinder.com/data/icons/space-1/48/24-128.png",

                    "small": "https://cdn4.iconfinder.com/data/icons/space-1/48/24-128.png"

                }

            },

            {

                "title": "Learn SQL In 20 Minutes",

                "image": {

                    "large": "https://cdn4.iconfinder.com/data/icons/space-1/48/15-128.png",

                    "small": "https://cdn4.iconfinder.com/data/icons/space-1/48/15-128.png"

                }

            },

            {

                "title": "Creating Your First Desktop App With HTML, JS and Electron",

                "image": {

                    "large": "https://cdn4.iconfinder.com/data/icons/space-1/48/25-128.png",

                    "small": "https://cdn4.iconfinder.com/data/icons/space-1/48/25-128.png"

                }

            }]

		}

	});

</script>

</body>

</html>

　　

【前端】Vue.js实现网格列表布局转换的更多相关文章

  1. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  2. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  3. Web前端-Vue.js必备框架（三）

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  4. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  5. Web前端-Vue.js必备框架（一）

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. 前端——Vue.js学习总结一

    一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...

  7. 偏前端-vue.js学习之路初级（一）概念

    首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时.    新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...

  8. Web - 前端 Vue.js （1）

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  9. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

随机推荐

  1. is_link

    'Symbolic Link' to File1  content containing path to File1'Hard Link' to File1 content containing Fi ...

  2. model方法取值总结

    转自:https://www.cnblogs.com/ajianbeyourself/p/3604332.html

  3. 2018/04/04 PHP 中的 数组排序问题

    简单说一下为什么要总结一下PHP中关于数组排序的问题. 在很多时候我们对于数组要进行排序,但是 PHP 中对于排序已经有了很多封装. 但是某些函数是修改原数组,一部分是返回修改后数组,与其一个个试,不 ...

  4. IDEA的快捷键和相关设置

      快捷键 Shift + Shift: 查找一切 Alt + /: 代码提示(需要修改) Ctrl + Alt + F12: 打开文件所在磁盘位置 Alt + F12: 打开终端 Alt + Ins ...

  5. 优化dedecms设置文章url自定义规则

    DEDECMS自定义URL规则的做得还是不错的,可清楚的看到URL中可用到的变量,并且这些变量包括年月日.时间戳.文章 ID.拼音+文章ID.拼音部首.栏目目录及日期加ID转换的字符串等,基本可以很好 ...

  6. Ubuntu 下Apache安装和配置

    在Ubuntu上安装Apache,有两种方式:1 使用开发包的打包服务,例如使用apt-get命令:2 从源码构建Apache.本文章将详细描述这两种不同的安装方式. 方法一:使用开发包的打包服务—— ...

  7. Java后台通过jxl生成Excel表格

    这里封装了一个工具类,将对象的list集合解析生成表格,只要按照参数要求传参就好了. 工具类代码如下: package com.hd.erpreport.utils; import java.io.F ...

  8. [LeetCode] 674. Longest Continuous Increasing Subsequence_Easy Dynamic Programming

    Given an unsorted array of integers, find the length of longest continuous increasing subsequence (s ...

  9. Django初级手册2-管理界面的使用及定制

    管理界面的使用 管理界面的URL,帐号和密码在第一次输入syncdb时建立 http://127.0.0.1:8000/admin/ 将app加入管理界面 编辑polls/admin.py from ...

  10. php深入学习

    关于PHP程序员解决问题的能力 http://rango.swoole.com/archives/340 深入理解PHP内核 by xuhong大牛 http://www.php-internals. ...