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>