vue製作排版不同的list清單

 使用v-model綁定切換樣式
原本想買白爛貓的飲料袋(不是業配)
沒搶到只好來仿它的購物清單
白爛貓

HTML
<div id=”app”>
<div class=”container”>

<div class=”title”>
<h3>白爛貓</h3>
<div>
<!–       <label>
<i class=”fa fa-list-ul”></i>
<input type=”checkbox”/>
</label> –>
<label>
<i class=”fa fa-th-large”></i>
<input type=”checkbox” v-model=”mode_detail”/>
</label>
</div>
</div>
<div class=”list {{mode_detail?’detail’:”}}” v-for=”list in list”>
<div class=”img”>
<img src=”{{list.img}}”/>
<div class=”img-info”>
<button class=”btn”><i class=”fa fa-search”></i></button>
<button class=”btn”><i class=”fa fa-shopping-cart”></i></button>
</div>
</div>
<div class=”infos”>
<h6 class=”name”>{{list.name

}}</h6>
<small>{{list.dec}}</small>
<div class=”price”><h4 class=”text-danger”>${{list.price}}<span><s>定價{{list.discount_price}}</s></span></h4></div>
<button class=”btn btn-danger btn-sm” v-if=”mode_detail”><i class=”fa fa-heart”></i> 加入最愛</button>
<button class=”btn btn-primary btn-sm” v-if=”mode_detail”><i class=”fa fa-shopping-cart”></i> 加入購物車</button>
</div>
</div>
</div>
</div>
CSS(SCSS)
body,html{
padding: 20px 0;
font-family: “Microsoft Yahei”,serif;
}
input[type=”checkbox”]{
display:none;
}

label{
cursor: pointer;
font-size: 1.4em;
border: 1px solid #999;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 6px;
background-color: #fff;
color: #999;
&:nth-child(2){
color: #fff;
background-color: #999;
}
}
.title{
display: flex;
justify-content: space-between;
margin-bottom: 1.2em;
h3{
margin: 0;
border-left: 5px solid #000;
padding-left: 15px;
}
>div{
margin-right: 8px;
}
button{
background-color: transparent;
margin: 0;
cursor: pointer;
border: 0;
width: 40px;
height: 40px;
color: #666;
font-size: 1.2em;
}
}
.list{
display: inline-block;
width: 25%;
float: left;
text-align: center;
small{
margin-left: 0.2em;
opacity: 0.6;
}
.img{
position: relative;
.img-info{
display: none;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%);
button{
background-color: rgba(255,255,255,0.7);
border: 1px solid #444;
&:hover{
background-color: #444;
color: #fff;
}
}
}
&:hover{
.img-info{
display: block;
}
}
}
img{
width:250px;
cursor: pointer;
&:hover{
filter: grayscale(80%);
}
}
}
.list.detail{
cursor: pointer;
background-color: transparent;
overflow: hidden;
display:block;
width: calc(100% / 2 – 10px);
margin-right: 10px;
text-align:left;
border: 1px solid #ccc;
box-shadow: 0 0 5px #cfcfcf;
margin-bottom: 0.6em;
border-radius: 15px;
&:hover{
box-shadow: none;
border-color: #444;
}
.img{
display:inline-block;
.img-info{
display: none;
}
img{
width:200px;
vertical-align:middle;
}
}

.infos{
width:calc( 100% – 200px – 20px );
display:inline-block;
vertical-align:middle;
}
}

.price{
h4{
span{
margin-left: 5px;
color: #444;
font-size: 0.5em;
font-weight: 300;
opacity: 0.8;
}
}
}

 JS
var listdatas = [
{
name: “白爛貓大浴巾”,
dec: “洗乾淨等你款-藍”,
img: “https://8685.cyberbiz.tw/media/W1siZiIsIjg2ODUvcHJvZHVjdHMvMzk4NzAyL0xDMDkwMzA1MDMwMl9BMDFfNjE0LmpwZWciXSxbInAiLCJ0aHVtYiIsIjYwMHg2MDAiXV0.jpeg?sha=9ae81cd28a094d2e

“,
discount_price: 399,
price: 499
},{
name: “白爛貓大浴巾”,
dec: “爛爛愛夏天款-藍”,
img: “https://8685.cyberbiz.tw/media/W1siZiIsIjg2ODUvcHJvZHVjdHMvMzk4NjkzL0xDMDkwMzA1MDMwMV9BMDFfODc0LmpwZWciXSxbInAiLCJ0aHVtYiIsIjYwMHg2MDAiXV0.jpeg?sha=5025b07aca12fb7e

“,
discount_price: 399,
price: 499
},{
name: “白爛貓搖擺飲料袋”,
dec: “立體手手走路94”搖擺””,
img: “https://8685.cyberbiz.tw/media/W1siZiIsIjg2ODUvcHJvZHVjdHMvNDEyNzU4L0xDMDEwNTAyMDQwMV9BMDFfNjE4LmpwZWciXSxbInAiLCJ0aHVtYiIsIjYwMHg2MDAiXV0.jpeg?sha=fac32a33b7153ca9

“,
discount_price: 249,
price: 399
},{
name: “白爛貓帆布便當袋”,
dec: “雙面圖案，厚實耐用，散步包”,
img: “https://8685.cyberbiz.tw/media/W1siZiIsIjg2ODUvcHJvZHVjdHMvMzc2MjQ2L0xDMDEwMjAxMTEwNF82NTAuanBlZyJdLFsicCIsInRodW1iIiwiNjAweDYwMCJdXQ.jpeg?sha=97ed974e024aa0cf

“,
discount_price: 399,
price: 499
},{
name: “白爛貓暖手枕”,
dec: “暖手枕真是太可愛、太舒服啦”,
img: “https://8685.cyberbiz.tw/media/W1siZiIsIjg2ODUvcHJvZHVjdHMvMzczNTU0L0xDMDEwMzAzMDIwNF82ODIuanBlZyJdLFsicCIsInRodW1iIiwiNjAweDYwMCJdXQ.jpeg?sha=6aa2bedcee0f38f3

“,
discount_price: 650,
price: 799
},{
name: “白爛貓票卡零錢包”,
dec: “快用錢砸我-天藍”,
img: “https://8685.cyberbiz.tw/media/W1siZiIsIjg2ODUvcHJvZHVjdHMvMzczNjQxL0xDMDEwMjAxMDcxNl85MDQuanBlZyJdLFsicCIsInRodW1iIiwiNjAweDYwMCJdXQ.jpeg?sha=a5ec71fd4e0a7cce

“,
discount_price: 199,
price: 250
},{
name: “白爛貓票卡零錢包”,
dec: “暗戀款-深黃”,
img: “https://8685.cyberbiz.tw/media/W1siZiIsIjg2ODUvcHJvZHVjdHMvMzc2MjM0L0xDMDEwMjAxMDcyNF8yMDEuanBlZyJdLFsicCIsInRodW1iIiwiNjAweDYwMCJdXQ.jpeg?sha=b1dcd4b3c72dc182

“,
discount_price: 199,
price: 250
},{
name: “白爛貓票卡零錢包”,
dec: “長太帥款-黃”,
img: “https://8685.cyberbiz.tw/media/W1siZiIsIjg2ODUvcHJvZHVjdHMvMzc2MjM5L0xDMDEwMjAxMDcwNC0yXzU2OC5qcGVnIl0sWyJwIiwidGh1bWIiLCI2MDB4NjAwIl1d.jpeg?sha=5391b8440850cd9f

“,
discount_price: 199,
price: 250
}
];

var vm = new Vue({
el: “#app”,
data: {
list: listdatas,
mode_detail:false,
mode_size:”small”,
},
})