Vue之改变布局

最新推荐文章于 2024-08-09 16:21:47 发布

shaojia_

最新推荐文章于 2024-08-09 16:21:47 发布

阅读量6.9k

点赞数 2

分类专栏： vue 文章标签： vue之布局切换

本文链接：https://blog.csdn.net/a271720559/article/details/81676575

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue之改变布局

我们在购物的网站经常会看物品列表可以切换显示模式。也就是有两种布局可以来回切换，看用户喜欢哪种来选择。今天我们来看看vue怎么实现简单的布局切换。

效果图：

点击图形就只显示图片，点击图形加文字就多显示出文字。

其实实现起来很简单，绑定一个数据集，里面有图片路径和图片文字。用两个div显示并用v-show来控制哪一个显示。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
#test{text-align: center;margin:0 auto;}
.topLink{height: 40px;background-color: gray; width: 500px; margin: 0 auto;text-align: right;}
.topLink a{text-decoration: none;position: relative;top: 18px;margin-left: 10px}
.listImg{margin: 0 auto;width: 550px;}
.listImg ul li{list-style: none;float: left;margin-left: 5px;margin-top: 5px;}
.listImg ul li img{width: 150px;height: 100px}
</style>
<script src="vue.min.js"></script>
<body>
	<div id="test">
		<h1>vue之改变布局</h1>
		<div class="topLink">
			<a href="#" @click="layoutImg=false">图形</a>
			<a href="#" @click="layoutImg=true">图形加文字</a>
		</div>
		<div class="listImg" v-show="!layoutImg">
			<ul>
				<li v-for="item in dataList"><img v-bind:src="item.imgSrc" /></li>
			</ul>
		</div>
		<div class="listImg" v-show="layoutImg">
			<ul>
				<li v-for="item in dataList"><img v-bind:src="item.imgSrc" />{{item.title}}</li>
			</ul>
		</div>
	</div>
</body>
<script >
	new Vue({
		el : "#test",
		data: {
	        layoutImg : false,
	        dataList :[
	        	{'imgSrc':'layout1.png',title:"test1"},
	        	{'imgSrc':'layout2.png',title:"test2"},
	        	{'imgSrc':'layout3.png',title:"test3"},
	        	{'imgSrc':'layout4.png',title:"test4"},
	        	{'imgSrc':'layout5.png',title:"test5"},
	        	{'imgSrc':'layout6.png',title:"test6"},
	        ]
    	},
    	methods:{
    		
    	},
    	computed :{
    		
    	}
	})
</script>
</html>

shaojia_

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue之改变布局

Vue之改变布局我们在购物的网站经常会看物品列表可以切换显示模式。也就是有两种布局可以来回切换，看用户喜欢哪种来选择。今天我们来看看vue怎么实现简单的布局切换。效果图：点击图形就只显示图片，点击图形加文字就多显示出文字。其实实现起来很简单，绑定一个数据集，里面有图片路径和图片文字。用两个div显示...
复制链接

扫一扫

专栏目录