跳至主要内容

[Vue] Vue指令-屬性樣式綁定

相關連結​

v-bind (綁定屬性)​

Codepen完整程式碼

<div id="app">
  <div class="p-5">
    <h3>綁定屬性 v-bind</h3>
    <p>{{ breakfastShop.name }}</p>
    <img v-bind:src="breakfastShop.imgUrl" class="square-img" alt="">

    <h3>縮寫形式 <code>:</code></h3>
    <img class="square-img" :src="breakfastShop.imgUrl" alt="">

    <hr>
    <h3>更多屬性綁定</h3>
    小明還想點餐：
    <form action="">
      <input type="text" value="我要吃蘿蔔糕">
      <button type="submit" :disabled="isFull">送出</button>
    </form>

    <button type="button" v-on:click="change('isFull')">狀態切換</button>

    <hr>
    <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="item.name">
              <label class="form-check-label" :for="item.name">
                我要這個
              </label>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <hr>
    <h3>表達式運用（串接）</h3>
    <p>{{ imageSize }}</p>
    <input type="range" min="100" max="1000" v-model="imageSize">
    <br>
    <img :src="`${breakfastShop.resizeImg}&w=${imageSize}`" alt=""
        >

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

    <hr>
    <h3>預告：元件的資料傳遞亦是使用 v-bind</h3>
    <ul>
      <list-item :item="item" v-for="(item, key) in products" :key="item.name + 2"></list-item>
    </ul>
  </div>
</div>

html屬性可以使用v-bind去綁定

語法為：v-bind:[欲綁定屬性名稱]="[屬性值]"
也可以使用縮寫形式：:[欲綁定屬性名稱]="[屬性值]"

<h3>綁定屬性 v-bind</h3>
<p>{{ breakfastShop.name }}</p>
<img v-bind:src="breakfastShop.imgUrl" class="square-img" alt="">

<h3>縮寫形式 <code>:</code></h3>
<img class="square-img" :src="breakfastShop.imgUrl" alt="">

v-for內的key

v-for內需要加上一組唯一值的key，就是使用v-bind來綁定的。 所以當然也可以使用縮寫形式 :key="id"

:[] (動態屬性)​

可以利用data的值去動態綁定屬性，點選按鈕切換dynamic內的值，接著input會根據這個值動態的設定disabled 或 readonly。

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

動態屬性gif

綁定class​

綁定class一樣是使用v-bind:class=""（同樣可以縮寫:class=""）。

:class與class可以同時使用。

物件寫法​

直接在:class內撰寫物件，屬性名稱為class名稱，值為判斷式確認是否要帶入該屬性。值可以使用變數去動態判斷：

物件屬性不可以有 -

如果遇到class名稱有 - 的，因為物件屬性不能使用這個符號，所以需要將其轉為字串才可以使用

e.g:'bg-danger'

<div class="box" :class="{rotate:true,'bg-primary':true}"></div>
<div class="box mt-5" :class="{rotate:isTransform,'bg-primary':boxColor}"></div>
<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>

也可以直接定義好物件，之後只要帶入該物件即可：

<div class="box" :class="objectClass"></div>

陣列寫法​

除了物件以外也可以直接使用陣列寫法。陣列內的每個字串都會被當成屬性名稱帶入。

<button class="btn" :class="arrayClass">請操作本元件</button>
<button type="button"
  class="btn btn-outline-primary"
  v-on:click="addClass(['btn-primary','disabled'])">為陣列加入 Class</button>
<button type="button"
  class="btn btn-outline-primary"
  v-on:click="clearClass()">清空陣列內的 Class</button>
物件陣列可以混用

其實測試過發現物件跟陣列的class寫法可以混用，只是實際開發感覺不會這樣做。

綁定行內樣式(style)​

綁定行內樣式時，需要使用物件的方式綁定。物件的屬性是樣式名稱，物件的值是樣式的值。

<div class="box" :style="{backgroundColor:'red',border:'5px solid blue'}"></div>
<div class="box" :style="styleObject"></div>
<div class="box" :style="[styleOjbect,styleObject2]"></div>
:style內的陣列

雖然在 Line:3 有在:style內綁定陣列，但是陣列內其實是多個物件的形式

e.g: :style="[{},{},{},...]

樣式屬性名稱

如果樣式屬性具有 - 連接，則需轉換成小駝峰形式。

e.g: background-color:'red' >> backgroundColor:'red'

也可以轉換成字串

e.g: 'background-color':'red'