---
# System prepended metadata

title: v-bind (動態新增或綁定一個或多個html的屬性(src、class、style、for、id、title...))

---

# v-bind (動態新增或綁定一個或多個html的屬性(src、class、style、for、id、title...))

ex: 使用 v-bind 來綁定屬性 (src、htme-for、id、key、title...)

```
  <h3>綁定屬性 v-bind</h3>
  <p>{{ breakfastShop.name }}</p>
  <img src="https://images.unsplash.com/photo-1600182610361-4b4d664e07b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="square-img" alt="">
    
   ※使用 v-bind 來將資料綁定再src上面，就可以將原本鏈結的網址替換成更簡潔的方式
   
  <h3>綁定屬性 v-bind</h3>
  <p>{{ breakfastShop.name }}</p>
  <img v-bind:src="breakfastShop.imgUrl" class="square-img" alt="">
  
  
----------------------------------------------------------------------------
  <h3>縮寫形式 <code>:</code></h3>
  <p>{{breakfastShop.name}}</p>
  <img :src="breakfastShop.imgUrl" :title="breakfastShop.name" class="square-img" alt="">
  
  ※ v-bind 是指令，後方則為html的屬性名稱 v-bind:src ； 而同時 v-bind 其實是有提供縮寫形式的指令 :src ，所以這樣的撰寫方式也是屬於 v-bind:src 的一種方法
  
```

----------------------------------------------------------------------------

ex: 使用 v-bind 來做狀態的切換

如果說我們今天希望控制某個按鈕是否為 disabled 的狀態，就可以這樣做：

  ```
  <form action="">
    <input type="text" value="我要吃蘿蔔糕">
    <button type="submit" :disabled="isFull">送出</button> // 影響這顆按鈕
    {{isFull}}
  </form>

  <button type="button"  v-on:click="change('isFull')">狀態切換</button> //切換按鈕
```
如果這個時候 disabled 的內容是 false 時，可正常送出表單 ； 反之內容是 true 時，那麼這個按鈕就會被掛上 disabled 的屬性無法使用。

----------------------------------------------------------------------------

ex: 當 label for 遇到 id 重複時，根據 html 的一個觀念 ， label for 都只會對應最前面的第一個 

```
<h3>搭配 v-for</h3>
  <table class="table">
    <tbody>
      <tr v-for="item in products" :key="item.imgUrl">
        <td>
          <img :src="item.imgUrl" class="square-img" alt="">
        </td>
        <td>
          {{ item.name }}
        </td>
        <td>
          {{ item.price }}元
        </td>
        <td>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="aa"> // 問題癥結點
            <label class="form-check-label" for="aa"> // 問題癥結點
              我要這個
            </label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
```

如果可以使用 v-bind 來替每一個 input 的綁上獨立的 id 來解決此問題點

```
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" :id="item.name">
    <label class="form-check-label" :for="item.name">
      我要這個
    </label>
</div>
```

----------------------------------------------------------------------------

ex: 使用表達式的方式，來動態的切換 html 的屬性。

```
  <h3>表達式運用（串接）</h3>
  <p>{{ imageSize }}</p>
  
  <input type="range" min="100" max="1000" v-model="imageSize">
  //先將 動態條 <input type="range"> 綁定 v-model 來進行資料的雙向綁定 
  
  <br>
  
  <img :src="`${breakfastShop.resizeImg}&w=${imageSize}`" alt=""
  
```
再將 img 用 v-bind 的方式綁定後，即可串接並造成連動效果

※ 在 Vue.js 可透過 v-model 來進行資料的「雙向」綁定， v-model 會根據不同的類別來更新資料以及元素的內容。

![](https://i.imgur.com/tSS3G6y.jpg)

----------------------------------------------------------------------------

ex: 讓一個屬性加上動態的值

```
  <h3>動態屬性綁定(注意大小寫)</h3>
  <button type="button"
  v-on:click="dynamic = dynamic === 'disabled' ? 'readonly':'disabled'">切換為 {{ dynamic }}</button>
  <br>
  {{dynamic}}
  <input type="text" :[dynamic] :value="name">
```

若要將動態的值加到屬性上時，可使用 :[] 的方式再將變數加入即可； :[dynamic]

----------------------------------------------------------------------------

script:(程式碼)

```
<script>
const App = {
  data() {
    return {
      name: '小明',
      isFull: false,
      link: '小明',
      imageSize: 200,
      dynamic: 'disabled',
      breakfastShop: {
        name: '奇蹟早餐',
        imgUrl: 'https://images.unsplash.com/photo-1600182610361-4b4d664e07b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80',
        resizeImg: 'https://images.unsplash.com/photo-1600182610361-4b4d664e07b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&q=80'
      },
      products: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false,
          imgUrl: 'https://images.unsplash.com/photo-1607278967323-8766a3a501e6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80'
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false,
          imgUrl: 'https://images.unsplash.com/photo-1603245460565-5a7b42a6a6f4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80'
        },
        {
          name: '小籠包',
          price: 60,
          vegan: false,
          imgUrl: 'https://images.unsplash.com/photo-1595424265370-3e02d3e6c10c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80'
        }
      ],
      productsObj: {
        chineseOmelette: {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        riceBall: {
          name: '飯糰',
          price: 35,
          vegan: false
        },
        soupDumpling: {
          name: '小籠包',
          price: 60,
          vegan: false
        },
        radishCake: {
          name: '蘿蔔糕',
          price: 30,
          vegan: true
        }
      },
    }
  },
  methods: {
    change: function (key) {
      this[key] = !this[key];
    },
  },
};

Vue.createApp(App)
  .component('list-item', {
    template: `
      <li>
        {{ item.name}} / {{ item.price }} 元
      </li>
    `,
    props: ['item']
  }).mount('#app');
</script>
```




----------------------------------------------------------------------------

ex: 使用 v-bind 來綁定樣式 (class、style...)

```
##<h3>物件寫法-1</h3>
  <div class="box" :class="{rotate:true ,'bg-danger':true}"></div>
  <!-- :class="{ key值是對應 className 名稱 ，物件的值則是 判斷式( true || false ) }"-->
  
  <div class="box" :class="{rotate:isTransform ,'bg-danger':boxColor}"</div>
  <!-- :class="{ key值是對應 className 名稱 ，物件的值則是 代入 data 屬性名稱 }"-->
  <hr>
```
```
##<h3>切換 Class</h3>
  <button class="btn btn-outline-primary" v-on:click="change('isTransform')">選轉物件</button>
  <button class="btn btn-outline-primary ms-1" v-on:click="change('boxColor')">切換色彩</button>

※ 為什麼觸發事件帶入參數的範例中 v-on:click="change('isTransform')" , change方法中的參數('isTransform')一定要以字串的形式傳入才能運作?

ANS:
    因為在 methods(方法) 裡面的  change: function (key) 裡面是用
    
      this[key] = !this[key];  //來做取值的方式

    這也就是用物件中括號選取值的方式，故意思如下:
    
    this['isTransform'] 也就是 isTransform 的值為預設的 true
```

```
##<h3>物件寫法-2</h3>
  <div class="box" :class="objectClass"></div>
  <!-- 直接代入 data()內的屬性名稱-->
  
※ 可在 data() 內，先建立物件的形式，在將其代入即可:
   
   objectClass:{
        rotate: true,
        'bg-danger': true,
      },

```
P.S 如果 className 名稱是有 bg-danger 這樣的形式或寫法時，在放入 :class="{ }" 括號時，請以 字串 的形式做呈現；如右: :class="{ 'bg-danger': true }"。

```
<script>
const App = {
  data() {
    return {
      isTransform: true,
      boxColor: false,
      objectClass:{
        rotate: true,
        'bg-danger': true,
      },
  methods: {
    change: function (key) {
      // console.log( !this[key] == true);
      this[key] = !this[key]; 
    },
    addClass(arr) {
      this.arrayClass.push(...arr);
    }
  },
};

Vue.createApp(App).mount('#app');
</script>
```

----------------------------------------------------------------------------

```
##<h3>陣列寫法</h3>

  <button class="btn" :class="['btn-primary','disabled']">請操作本元件</button>
  <!-- 針對單一元素，加入多個 className ； PS.目前 [] 中括號內是 Bootstrap className 的寫法-->
  ---------------------------------------------------------------------------------
  
  <button class="btn" :class="arrayClass">請操作本元件</button>
  <!-- 先將 :class=" " 代入 data() 內的 arrayClass 屬性名稱: arrayClass: ['']   -->
  
  <button type="button" class="btn btn-outline-primary" v-on:click="addClass(['btn-primary', 'active','disabled'])">為陣列加入 Class</button>
  <!-- 透過 v-on:click="addClass(['btn-primary', 'active','disabled'])" 來呼叫 methods(方法) 裡面的 addClass(arr) 函式 ， 並將 參數代入: 如下
  
      this.arrayClass.push(...arr); // 添加到 data() 內的 arrayClass: [''] 中括號內
      
  在從有 <button :class="arrayClass"> 顯示出來 </button>    
      
  -->
  <hr>
```
```
<script>
const App = {
  data() {
    return {
      isTransform: true,
      boxColor: false,
      objectClass:{
        rotate: true,
        'bg-danger': true,
      },
      // Array 操作
      arrayClass: [''],
    };
  },
  methods: {
    addClass(arr) {
      this.arrayClass.push(...arr);
    }
  },
};

Vue.createApp(App).mount('#app');
</script>
```

----------------------------------------------------------------------------

```
##<h3>行內樣式</h3>

  <h4>綁定行內樣式-1</h4>
  <div class="box" :style="{ background-color : 'green'}"></div>
  <!-- 如果 v-bind 對應的是 style 時，若要添加 background-color 屬性名稱時，建議將此屬性名稱，改為 駝峰式命名 ； 如下: -->
  
  <div class="box" :style="{ backgroundColor : 'green'}"></div>
  <!-- :style="{ key 會帶入 style 的屬性(使用駝峰式命名) : 值則是帶入 style 相對應的值 -->
  
  <h4>綁定行內樣式-2</h4>
  <div class="box" :style="styleObject"></div>
  <!-- 有準備好的 style 樣式資料格式，也可直接代入； :style="styleObject"   -->
  
  
  <div class="box" :style="[styleObject,styleObject2,styleObject3]"></div>   
  <!-- :style="[{},{},{}]" 一樣是陣列中包物件的概念-->
```
```
<script>
const App = {
  data() {
    return {
      // 行內樣式
      // 使用駝峰式命名
      styleObject: {
        backgroundColor: 'red',
        borderWidth: '5px'
      },
      styleObject2: {
        boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
      },
      styleObject3: {
        userSelect: 'none'
      }
    };
  },
};

Vue.createApp(App).mount('#app');
</script>
```
----------------------------------------------------------------------------

其他參考資料:
1.https://book.vue.tw/CH1/1-4-directive.html
2.https://ithelp.ithome.com.tw/articles/10219641

p.s 元件的資料傳遞亦是使用 v-bind