S6:加入【lable表單】利用【v-model】進行互動

S6-1:加入【label】表單結構

html結構:

  <!-- json 明細載入 -->
    <div id="movie">
      
        <!-- 利用表單進行格式修改 -->
          <label for="">
            詳細資料<input type="checkbox">
          </label>
          <label>
              大呈現<input type="radio" value="">
              小呈現<input type="radio" value="">
          </label>
          <hr>

  <!-- json 明細載入 -->
    ......
</div>

SCSS美化

label{
  padding-left: 150px;
  display: inline-block; margin: 10px; 
}
hr{margin-bottom: 20px;}
input[type="radio"]{
  width: 50px;
  height: 20px;
  background: #333;
  border-radius: 50px;
}
input[type="checkbox"]{
  width: 50px;
  height: 20px;
  background: #333;
}

 

S6-2:Vue 【data:】加入【mode_detail:true】

var app =new Vue({
      el:'#app',
      data:{
        mvlists:[],
        mode_detail:true
      },  // data end
      mounted:function(){
        this.getMovie();
      },  //mounted end 
      methods:{
        getMovie:function(){
          axios.get('./movielist.json')
          .then(function (response) {
            console.log(response);
            app.mvlists = response.data;
            console.log(app.mvlists);
          })
        } // getTrips End
      } // methods end
    }); //Vue end

S6-3:加入【v-model】,當勾選與否【詳細資料】時,利用【v-if】進行判斷是否顯示

  <!-- json 明細載入 -->
  <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="detail">
      <div class="mvlist" v-for="list in mvlists">
        <div class="mvImg">
          <a href="#" class="a"> <img v-bind:src="'../images/p5/'+list.image+'.jpg'" v-bind:alt="list.title"></a>
        </div>
        <div class="mvItem">
          <div class="title">{{list.title}}</div>
          <div class="sub" v-text="list.sub"></div>
          <div class="actor" v-text="'演員:'+list.actor" v-if="mode_detail"></div>
          <div class="director" v-text="'導演:'+list.director"  v-if="mode_detail"></div>
          <div class="tag" v-if="mode_detail">類型:
              <span v-for="tagItem in list.tag" v-text="tagItem+'/'"></span>
          </div>
          <div class="price" v-text="'原價:'+list.price+'元'"></div>
          <div class="price"  v-if="!mode_detail&&!list.is_discount">
            <span class="red" v-text="list.discount*100"></span>折,
            優惠價:<span class="red"  v-text="parseInt(list.price*list.discount)" ></span>元
          </div>
          <div class="score" v-text="list.score"  v-if="!mode_detail"></div>
        </div>
        <div class="mvDesc" v-if="mode_detail">
          <h4 v-text="list.title"></h4>
          <p v-text="list.desc"></p>
        </div>
      </div>
    </div>
  </div>