# 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 會根據不同的類別來更新資料以及元素的內容。
----------------------------------------------------------------------------
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
Sign in with Wallet
Connect another wallet