終於踏入Javascript框架之Vue..(2)v-bind

使用vue一個很方便的點就是能夠綁定各種數據

接下來就一個一個來介紹

• v-bind：常用於屬性(class, id, style)綁定
• v-model：雙向綁定，常用於輸入表單與資料，能讓資料同步
• v-on：事件綁定，類似於我們在學習javascripte時會用到的addEventListener
• v-if/v-else：判斷條件，基於特定條件下決定要顯示什麼樣的畫面
• v-for：用於渲染網頁的資料，非常好用

v-bind的用法

這一篇我們來講v-bind的用法，主要是用來綁定class，常用的方法有下面幾種

1.判斷式

2.array

3.object

判斷式

首先在JS中我們需要定義class1的值

const class1 = ref(true)

在html模板顯示中會用 v-bind=""的語法，例如

<p v-bind:class="{class1: isTrue}"></p>

而更通用的寫法是用半形冒號的方式

<p :class="{class1: isTrue}"></p>

class1是否存在取決於isTrue返回的值(true/false)

style綁定

用camelCase或是kebab-case都可以，差別在於有沒有用''

const fontSize = ref(30)

<div :style="{ fontSize: fontSize + 'px' }"></div>

<div :style="{ 'font-size': fontSize + 'px' }"></div>

array

有條件的渲染

<div :class="[isActive ? activeClass : '', errorClass]"></div>
當isActive返回ture=>activeClass

errorClass會一直存在

使用嵌套

<div :class="[{ [activeClass]: isActive }, errorClass]"></div>

Object

先定義styleObject中的css樣式

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

style直接與styleObject綁定

<div :style="styleObject"></div>

踩雷筆記

有時候會不小心將`混用到屬性綁定中。

而正確的綁定屬性值應該使用 雙引號 " 圍繞整個屬性，並用 單引號 ' 包裹 JavaScript 表達式內的字串。

例如我想要顯示producInfo這項資料的index=1裡面的image數字，並用webp的附檔名顯示，一開始誤寫成

<img :src=`/${productInfo[1].images[1]}.webp` alt="">

而正確的寫法應該是

<img :src="'/'+${productInfo[1].images[1]}'+'.webp'" alt="">