vue (3) 屬性綁定與表單操作

發表於 2024-05-02 更新於 2024-08-13 分類於 Vue

使用v-bind、v-model指令綁定資料與畫面

指令

Vue 裡提供了 v- 開頭的指令，可以套用在 html 上，當與指令搭配的值改變時，元素標籤的狀態也會跟著改變。

v-bind 屬性綁定

v-bind 指令可以將 data 內的資料與 html 做綁定，常見的標籤屬性如 a 連結的 href 和圖片的 src 都可以綁定
用法如下:

1	<p v-bind:id="customId">123</p>

實際在瀏覽器渲染時會變成:

1	<p id="item-id-1">123</p>

v-bind 指令的簡寫為 :

1	<p :id="customId">123</p>

當 data 內的資料為 null 或 undefined 時，屬性會從標籤移除。

Boolean 值綁定

v-bind 綁定的值如果是 boolean 時，當值為 truthy value 或是空字串時，屬性都會被渲染

1	<button :disabled="isButtonDisabled">Button</button>

動態指令

可以用 [] 動態帶入指令的名稱。

<a v-on:[eventName]="doSomething"> ... </a>

<!-- shorthand -->
<a @[eventName]="doSomething"> ... </a>

v-model 表單綁定

常見的表單元素如 <select> <input> 等，可以透過 v-model 來做資料的雙向綁定，v-model 會根據不同表單類別來更新元素內容。

input 文字框

在常見的 input 加上 v-model 後，此時輸入框會自動綁定 input 事件。當輸入框的文字被更改，會自動更新data內資料。

<input v-model="message" placeholder="edit me"> 
<script>
  // vue3 寫法
  const { createApp } = Vue;
  const vm = createApp({
    data() {
      return {
        message: '',
      }
    },
  });
  vm.mount('#app');
</script>

v-model 其實就是語法糖，做的就是監聽 input 的 value，當value更改時觸發input事件

1
2
3

<input
  :value="text"
  @input="event => text = event.target.value">

select操作

利用在select 標籤上加上v-model，可將option的值寫入變數內。

也可用 v-for 繪製 select 裡的 option

select多選方法

利用在 select 標籤中加入 mutiple屬性，就可以多選，此時v-model會將多筆資料寫入空陣列裡。

checkbox 單選框

checkbox 單選框搭配 true-value、false-value 可以直接將值寫到綁定的變數，如下為 checkAnswer2

<h3>checkbox 單選延伸</h3>
<p>小明，你是吃飽沒？</p>
<p>{{ checkAnswer2 }}</p>
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="check2" 
    v-model="checkAnswer2"
    true-value="吃飽了" false-value="還沒">
  <label class="form-check-label" for="check2">小明回覆</label>
</div>