使用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",
  },
})

範例網址