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>