iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 11
0
自我挑戰組

新手初探 Vue系列 第 11

鐵人賽Day11 - 動態切換 class 和 style 多種方法

先建置 Vue 資料的基本狀態:

<script>
var app = new Vue({
  el: '#app',
  data: {
    isTransform: false,
    boxColor: false,
    objectClass: {
      'rotate': false,
      'bg-danger': false,
    },
    arrayClass: [],
    styleObject: {
      backgroundColor: 'red',
      borderWidth: '5px'
    },
    styleObject2: {
      boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
    },
    styleObject3: {
      userSelect: 'none'
    }
  },
});
</script>

我們在動態切換 class 的時候會採用 v-bind 指令來綁定 class 屬性,但除了一種 class 之外我們也可以採用多種 class 並可以用物件的寫法來撰寫,例如下面的例子,我們把 .rotate.bg-danger 兩種 class 寫成物件並綁在 .box 內,再藉由 buttonclickinputcheckbox 勾選來切換資料狀態,進而達到添加 class.box 內:

<div id="app">
  <h4>物件寫法</h4>
  <div class="box" :class="{ 'rotate' : isTransform , 'bg-danger' : boxColor }"></div>
  <p>請為此元素加上動態 className</p>
  <hr>
  <button class="btn btn-outline-primary" v-on:click="isTransform = !isTransform">選轉物件</button>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle1" v-model="boxColor">
    <label class="form-check-label" for="classToggle1">切換色彩</label>
  </div>
</div>

除了可以直接在 class 內用物件的寫法來撰寫之外,我們也可以把這些 classVue 內單獨寫成一個物件:

<div id="app">
  <h5>物件寫法 2</h5>
  <div class="box" :class="objectClass"></div>
  <hr>
  <button class="btn btn-outline-primary" @click="objectClass.rotate = !objectClass.rotate">選轉物件</button>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle2" v-model="objectClass['bg-danger']">
    <label class="form-check-label" for="classToggle2">切換色彩</label>
  </div>
</div>

上述除了 .box 內的動態 class 換成物件的資料狀態外,對於 buttonclickinputcheckbox 的勾選,資料綁定上都要採用讀取物件屬性的方式

除了物件的寫法,我們也可以採用陣列的寫法,而這個寫法適合不知道 class 有多少個時候做使用,如下:

<div id="app">
  <h4>陣列寫法</h4>
  <button class="btn" :class="['btn-outline-primary','active']">請操作本元件</button>
</div>

以上我們是直接把 class 直接寫在陣列內,而我們也可以用預先定義好的空陣列綁上去,再藉由 buttonclickinput checkbox 的勾選來改變資料狀態:

<div id="app">
  <h4>陣列寫法</h4>
  <button class="btn" :class="arrayClass">請操作本元件</button>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle3" v-model="arrayClass" value="btn-outline-primary">
    <label class="form-check-label" for="classToggle3">切換樣式</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle4" v-model="arrayClass" value="active">
    <label class="form-check-label" for="classToggle4">啟用元素狀態</label>
  </div>
</div>

這裡要注意的是,inputv-model 綁定了 arrayClass 但是 class 的名字是藉由 value 這個屬性傳送進去的

再來是行內樣式,上述講到了物件的寫法和陣列的寫法,那當然行內樣式我們也可以採用相同的方式:

<div class="box" :style="{ 'backgroundColor': 'red'}"></div>

值得一提的是,style 屬性必須要用駝峰式來撰寫,而我們不只可以添加一種屬性,也可以添加多種,就像物件那樣:

<div class="box" :style="{ 'backgroundColor': 'red', 'borderWidth':'5px'}"></div>

最後我們也可以把這些屬性寫成物件放進去:

<div class="box" :style="styleObject"></div>

當然我們也可以用陣列的方式傳送多個物件:

<div class="box" :style="[styleObject,styleObject2]"></div>

上一篇
鐵人賽Day10 - 基礎語法整理
下一篇
鐵人賽Day12 - v-for 使用細節
系列文
新手初探 Vue30

尚未有邦友留言

立即登入留言