Vue.js 从零开始：v-bind

这篇终於要开始学习指令，先从v-bind开始介绍，单纯用JavaScript来控制的属性，需要写蛮多的程序码，只要使用Vue的指令会省略很多，以下开始实作吧！

1.绑定Style

定义data内style的资料，用资料来控制画面样式：

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时，可以 { } 大括号撰写判断式，而动态的关键，就是data里isAcrive的值:

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': 判断式}"}，data的isAcrive如果是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除了可以绑定style、class，还有很多标签属性可以做绑定，像是常见的id，图片的src，连结的href等DOM都可以透过v-biud来达到动态的效果，以上有用到 ：都是v-biud的缩写，是v-bind绑定後的属性。

参考资料

Vue.js 的黑魔法：指令
Vue官网
Vue笔记
v-bind动态绑定