iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 7
1

前言

上一篇我們介紹了Vue指令:V-bind、V-on,那今天我們要學習另外一個Vue指令:V-bind
本文同步發表於Andy's Blog

V-bind

參考資料:Vue.js官網教學

目的:用來動態新增或綁定一個或多個屬性(src、class、style)
縮寫::
我們先來看一個範例:
範例連結

<div id="app">
  <img v-bind:src="imgSrc" v-bind:class="className" alt="">
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    imgSrc: 'https://i.imgur.com/b28TAf1.png',
    className:'img-fluid'
  }
})
</script>

範例中為新增圖片屬性、className屬性
圖片來源:property 跟 attribute差別


V-bind 動態切換ClassName與Style

參考資料:官網介紹Class 與Style 綁定

1.動態加上className、陣列、物件寫法簡介:

練習連結

//{}內,前面是自定義className 後面是判斷式(truthiness才會顯示)
 <div :class="{ blue: isBlue }">
      1 Hello Vue!
    </div>
    //class:blue

    <div :class="'blue'">  
      2 Hello Vue!
    </div>
    //class:blue

    <div :class="largeFont">  
      3 Hello Vue!
    </div>
    //class:big-size 
                    
    <div :class="[largeFont, pinkBackground] "> 
      4 Hello Vue!
    </div>
    //class:big-size pink-bg
   var vm = new Vue({
      el: '#app',
      data: {
        isBlue: false,
        largeFont: 'big-size',
        pinkBackground: 'pink-bg',
       }
    });

小結論:

1.加上單引號時 class 是字串,如::class="'blue'",會去讀取已經定義好的 CSS 樣式
補充:className有-連結 如:btn-outline-primary需要使用引號
寫法如下: :class="'btn-outline-primary'"
2.沒有加上單引號則會去取得在 Vue 定義的 data 資料
若還是不清楚,可以觀看這範例練習連結

2.綁定style行內樣式寫法

這種寫法跟css寫法很像喔~
寫法:前面是css屬性名稱 後面值請去實體(vue instance)尋找
範例連結

<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Hello Vue1!</div>

    <hr>

    <div :style="styleObject1">
      Hello Vue2!
    </div>

    <div :style="[styleObject1, styleObject2]">
      Hello Vue3!
    </div>
  </div>

 var vm = new Vue({
      el: '#app',
      data: {
        activeColor: 'red',
        fontSize: 30,
        styleObject1: {
          color: 'green',
          'font-size': '100px',  //有-,加上‘’即可
          marginBottom: '50px'
        },
        styleObject2: {
          color:'black',     //後面屬性會蓋掉前面顏色
          backgroundColor: 'cyan',
          lineHeight: '2em'
        }
      }
    });

注意:
1.Css屬性有-,記得加上''雙引號,才不會噴錯喔!


延伸閱讀:V-bind動態切換ClassName與Style

同樣介紹綁定樣式寫法,但相對上面例子更為複雜。建議先理解上面例子後,再來閱讀下面內容 練習檔案連結

一、物件寫法整理如下

使用物件寫法共分兩種

1.物件寫法ㄧ
//{}內,前面是className 後面是判斷式(true才會顯示)
<div class=“box” :class=“{‘rotate’:isTransform , ‘bg-danger’:boxColor}”></div>

<button class="btn btn-outline-primary" @click="isTransform = !isTransform">選轉物件</button>
說明:isTransform = !isTransform 可以參考下方備註

2.物件寫法二(很少使用,所以知道用法就好,不用深入)
<div class=“box” :class=“objectClass”></div>

<button class="btn btn-outline-primary"
<input type="checkbox" class="form-check-input" id="classToggle2" v-model="objectClass['bg-danger'] ">

data中資料
objectClass: {
    'rotate': false,
    'bg-danger': false },

其實兩種寫法都只是在切換true或false而已,來動態新增class
備註:點擊按鈕就把 isTransform 的結果顛倒過來

二、陣列寫法整理如下

陣列寫法也有兩種:適合用在長度不確定

1.直接綁定className
<button class=“btn” :class=“[ activeClass, errorClass, border]”>請操作本元件</button>

補充一下:data資料會這樣撰寫
data: {
       activeClass: 'active',
       errorClass: 'text-warning',
       border:'border',
}

2.使用陣列傳入
<button class="btn" :class="arrayClass">請操作本元件</button>

<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>

上面範例2使用陣列傳入原理:

藉由v-model綁定arrayClass,並透過value動態傳入className
補充:HTML input標籤的value 屬性

動態新增ClassName結論:

一、物件
1.物件寫法一中,className是否要加引號都沒差,但遇到有-className就一定要加
二、陣列
1.加上單引號時 class 是字串,會去讀取已經定義好的 CSS 樣式
補充:className有-連結 如:btn-outline-primary’需要使用引號
2.沒有加上單引號則會去取得在 Vue 定義的 data 資料

三、綁定style行內樣式寫法

總共有下列四種方式
<div class="box" :style="{['background-color']:'blue'}"></div>
<div class="box" :style="styleObject"></div>
<div class="box" :style="[{'backgroundColor':'green'},{'borderWidth':'20px'}]"></div>
<div class="box" :style="[styleObject,styleObject2]"></div>

styleObject: {
  backgroundColor: 'red',
  borderWidth: '5px'
},
styleObject2: {
  boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
},

結果如下圖:

撰寫時,注意事項:
1.如果屬性名稱(attribute)有-,要用[]選取
Q1:什麼時候用v-bind、什麼時候用v-model?
A: v-bind 是將狀態綁定到元素上
而 v-model 是接收資料,所以基本上 v-model 只會用在 input, textarea, select


上一篇
Day6 Vue 指令V-on、V-model介紹
下一篇
Day8 Vue 指令V-for介紹
系列文
前端新手筆記-Vue.js30

尚未有邦友留言

立即登入留言