Vue之改变布局

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

shaojia_

7027人浏览 · 2018-08-14 23:29:10

shaojia_ · 2018-08-14 23:29:10 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^