技術標籤：vuevuejavascript

一、基礎

1. 除了內容需要動態來決定外，某些屬性我們也希望動態來繫結。，比如動態繫結a元素的href屬性，比如動態繫結img元素的src屬性，比如圖片的連結src、網站的連結href、動態繫結一些類、樣式等等，這個時候，我們可以使用v-bind指令。
2. 作用：動態繫結屬性
   縮寫：:
   預期： any (with argument) | Object (without argument)
   引數：attrOrProp (optional)

<img v-bind:src="imgURL" alt="">
  <a v-bind
 
:href="aHref">百度一下</a>

語法糖

語法糖就是一種語法的簡寫方式，在開發中，我們通常會使用語法糖的形式，因為這樣更加簡潔。
v-bind的語法糖：：

<!--語法糖的寫法-->
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>

二、v-bind繫結class

很多時候，我們希望動態的來切換class，比如：當資料為某個狀態時，字型顯示紅色。當資料另一個狀態時，字型顯示黑色。 繫結class有兩種方式：

• 物件語法
• 陣列語法

1、物件語法：class後面跟的是一個物件

用法一：直接通過{}繫結一個類

<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通過判斷，傳入多個值

<h2 :class="{'active': isActive, 'line':isLine}">Hello World</h2>

用法三：和普通的類同時存在，並不衝突

如果isActive和isLine都為true，那麼會有title/active/line三個類
 <
 
h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果過於複雜，可以放在一個methods或者computed中 注：classes是一個計算屬性

<h2 class="title" class="classes">Hello World</h2>

2、陣列語法: class後面跟的是一個數組

用法一：直接通過{}繫結一個類

<h2 :class="['active']">Hello World</h2>

用法二：也可以傳入多個值

<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的類同時存在，並不衝突

會有title/active/line三個類
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果過於複雜，可以放在一個methods或者computed中

注：classes是一個計算屬性
<h2 class="title" :class="classes">Hello World</h2>

v-bind繫結style

1. 物件語法

:style="{color: currentColor, fontSize: fontSize + 'px'}"
style後面跟的是一個物件型別
物件的key是CSS屬性名稱
物件的value是具體賦的值，值可以來自於data中的屬性

2. 陣列語法

<div v-bind:style="[baseStyles, overridingStyles]"></div>
style後面跟的是一個數組型別
多個值以，分割即可