iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
自我挑戰組

Vue.js 從零開始系列 第 10

Vue.js 從零開始:v-bind

這篇終於要開始學習指令,先從v-bind開始介紹,單純用JavaScript來控制的屬性,需要寫蠻多的程式碼,只要使用Vue的指令會省略很多,以下開始實作吧!


1.綁定Style

定義datastyle的資料,用資料來控制畫面樣式:

const vm = Vue.createApp({
  data() {
    return {
      text: 'Hello Vue!!',
      style: {
        color: "#0095C0",
        background: "#000",
      }
    }
  }
}).mount('#app');
<div id="app">
  <div :style="style">{{ text }}</div>
</div>

以上用物件格式寫到style裡面,如果用陣列格式可以改成以下:

const vm = Vue.createApp({
  data() {
    return {
      text: 'Hello Vue!!',
      red: {
        color:"#0095C0",
      },
      blackbBg: {
        background: "#000",
      }
    }
  }
}).mount('#app');
<div id="app">
  <div :style="[red,black]">{{ text }}</div>
</div>

2.綁定Class

需要動態綁動Class時,可以 { } 大括號撰寫判斷式,而動態的關鍵,就是dataisAcrive的值:

const vm = Vue.createApp({
  data() {
    return {
      text: 'Hello Vue!!',
      isAcrive: true,
    }
  }
}).mount('#app');

data建立一個isAcrive變數,來決定是否要套用ClassName

<div id="app">
  <div class="bgblue" :class="{active: isAcrive}">{{ text }}</div>
</div>

v-bild:class="{'要綁定的className': 判斷式}"}dataisAcrive如果是true就套用,如果是false就不套用。

使用三元運算子做更多變化

const vm = Vue.createApp({
  data() {
    return {
      text: 'Hello Vue!!',
      isAcrive: true,
    }
  }
}).mount('#app');

沿用上一個JavaScript。

<div id="app">
  <div class="active"
  :class="[ isAcrive? 'bgblue' : 'bgred' ]" 
  @click="isAcrive = !isAcrive">{{ text }}
  </div>
</div>

v-bind:class="[判斷式? '結果為true的 Class': '結果為false的 Class']",利用點擊事件達到控制data裡的isAcrive值,從而改變className


總結

v-biud除了可以綁定styleclass,還有很多標籤屬性可以做綁定,像是常見的id,圖片的src,連結的hrefDOM都可以透過v-biud來達到動態的效果,以上有用到 都是v-biud的縮寫,是v-bind綁定後的屬性。


參考資料

Vue.js 的黑魔法:指令
Vue官網
Vue筆記
v-bind動態綁定

/images/emoticon/emoticon13.gif


上一篇
Vue.js 從零開始:Hoisting , undefined,not defined
下一篇
Vue.js 從零開始:v-model
系列文
Vue.js 從零開始30

尚未有邦友留言

立即登入留言