Vue 程式札記 : 指令 v-model

v-model 指令是 Vue 中一個非常重要的功能，它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。

什麼是 v-model 指令？

在 Vue.js 中，v-model 指令是一個用於在表單輸入和應用數據之間建立雙向綁定的指令，它可以讓你輕鬆的實現數據的雙向同步，即當輸入框的值發生變化時，綁定的數據也會同時更新，反之同樣如此。

v-model 基本用法

在最簡單的情況下，你可以將 v-model 指令綁定到一個表單輸入元素上，如以下範例：

<template>
  <div>
    <input v-model="message" placeholder="請輸入內容">
    <p>輸入的內容是：{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('');
</script>

v-model 支持的表單元素

v-model 指令支持以下類型的表單元素：

• input
• textarea
• select

不同類型的表單元素在使用 v-model 時會有一些差異，下面將分別進行介紹。

文本輸入框 input[type="text"]、textarea

對於文本輸入框和多行文本框，v-model 指令的用法相同，如上面的範例所示。它們都可以通過 v-model 進行雙向綁定。

單選按鈕 input[type="radio"]

對於單選按鈕來說，當用戶選中某個單選按鈕時，v-model 綁定的變量會更新為該按鈕的 value 屬性值。換句話說，v-model 會將選中的單選按鈕的 value 屬性值賦給綁定的變量。

<template>
  <div>
    <input type="radio" v-model="picked" value="One" id="one">
    <label for="one">One</label>
    <br>
    <input type="radio" v-model="picked" value="Two" id="two">
    <label for="two">Two</label>
    <p>選中的是：{{ picked }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const picked = ref('');
</script>

多選框 input[type="checkbox"]

對於多選框，v-model 的使用稍微複雜一些，v-model 應該綁定到一個數組上，數組中的元素對應於選中的多選框的 value 值。

<template>
  <div>
    <input type="checkbox" v-model="checkedNames" value="Jack">
    <label for="jack">Jack</label>
    <input type="checkbox" v-model="checkedNames" value="John">
    <label for="john">John</label>
    <input type="checkbox" v-model="checkedNames" value="Mike">
    <label for="mike">Mike</label>
    <p>選中的是：{{ checkedNames }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const checkedNames = ref([]);
</script>

下拉選單 select

對於下拉選單，v-model 的用法與單選按鈕類似，如果是單選下拉選單，v-model 綁定的值應該與選中的選項的 value 屬性相對應：

<template>
  <div>
    <select v-model="selected">
      <option value="A">選項 A</option>
      <option value="B">選項 B</option>
      <option value="C">選項 C</option>
    </select>
    <p>選中的是：{{ selected }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const selected = ref('A');
</script>

v-model 修飾符

Vue 提供了一些修飾符來擴展 v-model 的功能，這些修飾符可以讓你更靈活地控制數據的雙向綁定。

.lazu

默認情況下，v-model 在 input 事件上同步輸入框的值與數據，使用 .lazy 修飾符後，將改為在 change 事件上進行同步，這意味著數據只會在輸入框失去焦點時更新。

<input v-model.lazy="message" >

.number

將用戶的輸入自動轉換為數字類型。如果轉換失敗，則返回原始字符串。

<input v-model.number="age" type="number">

.trim

自動過濾用戶輸入的首尾空白字符。

<input v-model.trim="message">

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡