S7:取消勾選【詳細資料】時,加入【.simple】判斷顯示為簡單版版本

利用【v-bind:class】加【JS條件運算符】判斷,加上【class=”simple”】類別名稱

  <div id="movie">

    <!-- 利用表單進行格式修改 -->
    <label for="">
      詳細資料<input type="checkbox" v-model="mode_detail">
    </label>
    <label v-if="!mode_detail">
        大呈現<input type="radio" value="">
        小呈現<input type="radio" value="">
    </label>
    <hr>

    <div :class="mode_detail?'detail':'simple'">  <!-- 修改處 -->
    <div class="mvlist" v-for="list in mvlists">
    ...
    </div>
  </div>

SCSS美化:當類別名稱為【class=”simple”】,則排版不同

.simple{
  display: flex;
  flex-wrap: wrap;
  padding: 1%;

  .mvlist{
    background: #ffe6b6;
    width: 23%; padding: 10px; margin: 1%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    .mvImg{
      background: #FEFAEC;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px;
      a{text-align: center;}
      img{
        width: 70%; margin: auto;
      }
    }
    .mvItem{
      background: #c4eee9;
      flex: 1;
      font-size: .8em;
      padding: 10px; box-sizing: border-box;

      
      display: flex; flex-direction: column;
      
      width: 100%;
      .title{
        color: #c06a23; font-size: 1.3em; font-weight: bold;
        text-align: center; line-height: 1.8em;

        // 超出範圍 顯示【...】
        text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
      }
      .sub{
        color: #6b5d52; padding: 5px 0;
      }
      .score{
        color:#860000; font-size: 1.1em; align-self: flex-end;
      }
      .price{
        font-size: 1.1em; font-weight: bold;
        margin-top: auto;
      }
      .red{ color:#860000;}
    }
    .mvDesc{
      background: #daf893;
      // display: none;
    }
  }
} //simple end

 

S8:點選【大呈現】或【小呈現】顯示不同版本

 

S8-1:Vue加入 mode_size

  var urlJson='page/movielist2.json';
  new Vue({
    el:'#movie',
    created:function(){
      this.getUsers();
    },
    data:{
      mvlists:[],
      mode_detail: true,
      mode_size:"small"    //新增
    },
    ......
  })  //vue end

S8-2:html加入 v-model判斷

※Vue加入兩個類別名稱時,以陣列方式表達

  <!-- json 明細載入 -->
  <div id="movie">

    <!-- 利用表單進行格式修改 -->
    <label for="">
      詳細資料<input type="checkbox" v-model="mode_detail">
    </label>
    <label v-if="!mode_detail">
        大呈現<input type="radio"  v-model="mode_size" value="">       <!-- 修改處 -->
        小呈現<input type="radio" v-model="mode_size" value="small">   <!-- 修改處 -->
        {{mode_size}}                                                 <!-- 修改處 -->
    </label>
    <hr>

    <div :class="[mode_detail?'detail':'simple',mode_size]">          <!-- 修改處 -->
      <div class="mvlist" v-for="list in mvlists">
        ...
      </div>
    </div>
  </div>

 

SCSS美化:當類別名稱為【class=”small”】,則排版不同

.simple.small{  
  .mvlist{
    width: 15.5%; padding: 1%; margin: .5%;
    box-sizing: border-box;
  }
  .mvItem{
    padding: 5px;
    .title{
      color: #c06a23; font-size: 1.1em; 
      text-align: center; line-height: 1.8em;
      
    }
    .price{
      font-size: .9em; text-align: center;
    }
    .sub{
      font-size: .9em;
    }
    .red{ color:#860000;}
  }
} //.simple.small end